@anguless/angulux/select

select

2 declarations4 demos

import

import { SelectModule } from '@anguless/angulux/select';

Basic

Select takes an options array; optionLabel names the property to display.

<agl-select [(ngModel)]="selected" [options]="cities" optionLabel="name" placeholder="Select a city" />

Filter

Filtering is enabled with filter, and filterBy chooses which properties are searched.

<agl-select [(ngModel)]="selected" [options]="cities" [filter]="true" filterBy="name" optionLabel="name" placeholder="Select a city" />

Clear

showClear adds a control that returns the value to null.

<agl-select [(ngModel)]="selected" [options]="cities" [showClear]="true" optionLabel="name" placeholder="Select a city" />

Editable

An editable select accepts values that are not in the list.

<agl-select [(ngModel)]="selected" [options]="cities" [editable]="true" placeholder="Select or type" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

SelectItem

componentagl-selectItem

Input	Type	Default
id	string \| undefined	not documented
option	any	not documented
selected	boolean \| undefined	not documented
focused	boolean \| undefined	not documented
label	string \| undefined	not documented
disabled	boolean \| undefined	not documented
visible	boolean \| undefined	not documented
itemSize	number \| undefined	not documented
ariaPosInset	string \| undefined	not documented
ariaSetSize	string \| undefined	not documented
template	TemplateRef<any> \| undefined	not documented
checkmark	boolean	not documented
index	number \| undefined	not documented
scrollerOptions	any	not documented

Output	Type	Description
onClick	EventEmitter<any>
onMouseEnter	EventEmitter<any>

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.

Select

componentagl-select

Select is used to choose an item from a collection of options.

Input	Type	Default	Description
id	string \| undefined	not documented	Unique identifier of the component
scrollHeight	string	not documented	Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
filter	boolean \| undefined	not documented	When specified, displays an input field to filter the items on keyup.
panelStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the overlay panel element.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the element.
panelStyleClass	string \| undefined	not documented	Style class of the overlay panel element.
readonly	boolean \| undefined	not documented	When present, it specifies that the component cannot be edited.
editable	boolean \| undefined	not documented	When present, custom value instead of predefined options can be entered using the editable input field.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
placeholder		not documented	Default text to display when no option is selected.
loadingIcon	string \| undefined	not documented	Icon to display in loading state.
filterPlaceholder	string \| undefined	not documented	Placeholder text to show when filter input is empty.
filterLocale	string \| undefined	not documented	Locale to use in filtering. The default locale is the host environment's current locale.
inputId	string \| undefined	not documented	Identifier of the accessible input element.
dataKey	string \| undefined	not documented	A property to uniquely identify a value in options.
filterBy	string \| undefined	not documented	When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
filterFields	any[] \| undefined	not documented	Fields used when filtering the options, defaults to optionLabel.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
resetFilterOnHide	boolean	not documented	Clears the filter value when hiding the select.
checkmark	boolean	not documented	Whether the selected option will be shown with a check mark.
dropdownIcon	string \| undefined	not documented	Icon class of the select icon.
loading	boolean \| undefined	not documented	Whether the select is in loading state.
optionLabel	string \| undefined	not documented	Name of the label field of an option.
optionValue	string \| undefined	not documented	Name of the value field of an option.
optionDisabled	string \| undefined	not documented	Name of the disabled field of an option.
optionGroupLabel	string \| undefined	not documented	Name of the label field of an option group.
optionGroupChildren	string	not documented	Name of the options field of an option group.
group	boolean \| undefined	not documented	Whether to display options as grouped when nested options are provided.
showClear	boolean \| undefined	not documented	When enabled, a clear icon is displayed to clear the value.
emptyFilterMessage	string	not documented	Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.
emptyMessage	string	not documented	Text to display when there is no data. Defaults to global value in i18n translation configuration.
lazy	boolean	not documented	Defines if data is loaded and interacted with in lazy manner.
virtualScroll	boolean \| undefined	not documented	Whether the data should be loaded on demand during scroll.
virtualScrollItemSize	number \| undefined	not documented	Height of an item in the list for VirtualScrolling.
virtualScrollOptions	ScrollerOptions \| undefined	not documented	Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
overlayOptions	OverlayOptions \| undefined	not documented	Whether to use overlay API feature. The properties of overlay API can be used like an object in it.
ariaFilterLabel	string \| undefined	not documented	Defines a string that labels the filter input.
ariaLabel	string \| undefined	not documented	Used to define a aria label attribute the current element.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
filterMatchMode	'contains' \| 'startsWith' \| 'endsWith' \| 'equals' \| 'notEquals' \| 'in' \| 'lt' \| 'lte' \| 'gt' \| 'gte'	not documented	Defines how the items are filtered.
tooltip	string	not documented	Advisory information to display in a tooltip on hover.
tooltipPosition	'top' \| 'left' \| 'right' \| 'bottom'	not documented	Position of the tooltip.
tooltipPositionStyle	string	not documented	Type of CSS position.
tooltipStyleClass	string \| undefined	not documented	Style class of the tooltip.
focusOnHover	boolean	not documented	Fields used when filtering the options, defaults to optionLabel.
selectOnFocus	boolean	not documented	Determines if the option will be selected on focus.
autoOptionFocus	boolean	not documented	Whether to focus on the first visible or selected element when the overlay panel is shown.
autofocusFilter	boolean	not documented	Applies focus to the filter element when the overlay is shown.
filterValue	string \| undefined \| null	not documented	When specified, filter displays with this value.
options	any[] \| null \| undefined	not documented	An array of objects to display as the available options.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'self'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
motionOptions	MotionOptions \| undefined	not documented	The motion options.

Output	Type	Description
onChange	EventEmitter<SelectChangeEvent>	Callback to invoke when value of select changes.
onFilter	EventEmitter<SelectFilterEvent>	Callback to invoke when data is filtered.
onFocus	EventEmitter<Event>	Callback to invoke when select gets focus.
onBlur	EventEmitter<Event>	Callback to invoke when select loses focus.
onClick	EventEmitter<MouseEvent>	Callback to invoke when component is clicked.
onShow	EventEmitter<AnimationEvent>	Callback to invoke when select overlay gets visible.
onHide	EventEmitter<AnimationEvent>	Callback to invoke when select overlay gets hidden.
onClear	EventEmitter<Event>	Callback to invoke when select clears the value.
onLazyLoad	EventEmitter<SelectLazyLoadEvent>	Callback to invoke in lazy mode to load new data.

Template slot	Description
<ng-template #item>	Custom item template.
<ng-template #group>	Custom group template.
<ng-template #loader>	Custom loader template.
<ng-template #selectedItem>	Custom selected item template.
<ng-template #header>	Custom header template.
<ng-template #filter>	Custom filter template.
<ng-template #footer>	Custom footer template.
<ng-template #emptyfilter>	Custom empty filter template.
<ng-template #empty>	Custom empty template.
<ng-template #dropdownicon>	Custom dropdown icon template.
<ng-template #loadingicon>	Custom loading icon template.
<ng-template #clearicon>	Custom clear icon template.
<ng-template #filtericon>	Custom filter icon template.

Inherited from BaseInput

inherited

Input	Type	Default	Description
fluid		false	Spans 100% width of the container when enabled.
variant	'filled' \| 'outlined' \| undefined	'outlined'	Specifies the input variant of the component.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
inputSize	number \| null \| undefined	undefined	Specifies the visible width of the input element in characters.
pattern	string \| null \| undefined	undefined	Specifies the value must match the pattern. A list of regular expressions — what Signal Forms binds through `[formField]` — is ignored, because the form validates those itself.
min	number \| null \| undefined	undefined	The value must be greater than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
max	number \| null \| undefined	undefined	The value must be less than or equal to the value. A numeric string is read as a number; anything else that is not a finite number, such as the `Date` limit of a date field, is ignored.
step	number \| null \| undefined	undefined	Unless the step is set to the any literal, the value must be min + an integral multiple of the step.
minlength	number \| null \| undefined	undefined	The number of characters (code points) must not be less than the value of the attribute, if non-empty.
maxlength	number \| null \| undefined	undefined	The number of characters (code points) must not exceed the value of the attribute.

Inherited from BaseEditableHolder

inherited

Input	Type	Default	Description
required		false	There must be a value (if set). Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` is required when that control carries `Validators.required` or `Validators.requiredTrue`.
invalid		false	When present, it specifies that the component should have invalid state style. Left unbound, a control bound through `formControlName`, `[formControl]` or `ngModel` shows the state of that control once it is touched or dirty.
touched	boolean \| undefined	undefined	Whether the user has visited the control. Once this or `dirty` is set, the invalid state style waits for interaction: it appears when the control is touched or dirty. Signal Forms' `[formField]` sets both, so an untouched required field is not shown as invalid. Leave both unset and `invalid` alone decides.
dirty	boolean \| undefined	undefined	Whether the user has changed the value. See `touched`.
disabled		false	When present, it specifies that the component should have disabled state style.
name	string \| undefined	undefined	When present, it specifies that the name of the input.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.