@anguless/angulux/multiselect

multiselect

2 declarations3 demos

import

import { MultiSelectModule } from '@anguless/angulux/multiselect';

Basic

MultiSelect binds to an array and summarises the selection in its label.

Select cities

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

Chips

Chip display shows each selected item as its own removable chip.

Select cities

<agl-multiSelect [(ngModel)]="selected" [options]="cities" optionLabel="name" display="chip" placeholder="Select cities" />

Filter

Filtering searches the properties named by filterBy.

Select cities

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

API

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

MultiSelectItem

componentli[aglMultiSelectItem]

Input	Type	Default
option	any	not documented
selected	boolean \| undefined	not documented
label	string \| undefined	not documented
disabled	boolean \| undefined	not documented
itemSize	number \| undefined	not documented
focused	boolean \| undefined	not documented
ariaPosInset	string \| undefined	not documented
ariaSetSize	string \| undefined	not documented
variant	'outlined' \| 'filled'	not documented
template	TemplateRef<MultiSelectItemTemplateContext> \| undefined	not documented
checkIconTemplate	TemplateRef<MultiSelectItemCheckboxIconTemplateContext> \| undefined	not documented
itemCheckboxIconTemplate	TemplateRef<MultiSelectItemCheckboxIconTemplateContext> \| undefined	not documented
highlightOnSelect	boolean \| undefined	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.

MultiSelect

componentagl-multiSelect, agl-multiselect, agl-multi-select

MultiSelect is used to select multiple items from a collection.

Input	Type	Default	Description
id	string \| undefined	not documented	Unique identifier of the component
ariaLabel	string \| undefined	not documented	Defines a string that labels the input for accessibility.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Style class of the element.
panelStyle	any	not documented	Inline style of the overlay panel.
panelStyleClass	string \| undefined	not documented	Style class of the overlay panel element.
inputId	string \| undefined	not documented	Identifier of the focus input to match a label defined for the component.
readonly	boolean \| undefined	not documented	When present, it specifies that the component cannot be edited.
group	boolean \| undefined	not documented	Whether to display options as grouped when nested options are provided.
filter	boolean	not documented	When specified, displays an input field to filter the items on keyup.
filterPlaceHolder	string \| undefined	not documented	Defines placeholder of the filter input.
filterLocale	string \| undefined	not documented	Locale to use in filtering. The default locale is the host environment's current locale.
overlayVisible	boolean \| undefined	not documented	Specifies the visibility of the options panel.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
dataKey	string \| undefined	not documented	A property to uniquely identify a value in options.
ariaLabelledBy	string \| undefined	not documented	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
displaySelectedLabel		true	Whether to show labels of selected item labels or use default label.
maxSelectedLabels		3	Decides how many selected item labels to show at most.
selectionLimit	number \| undefined	not documented	Maximum number of selectable items.
selectedItemsLabel	string \| undefined	not documented	Label to display after exceeding max selected labels e.g. ({0} items selected), defaults "ellipsis" keyword to indicate a text-overflow.
showToggleAll	boolean	not documented	Whether to show the checkbox at header to toggle all items at once.
emptyFilterMessage	string	not documented	Text to display when filtering does not return any results.
emptyMessage	string	not documented	Text to display when there is no data. Defaults to global value in i18n translation configuration.
resetFilterOnHide	boolean	not documented	Clears the filter value when hiding the dropdown.
dropdownIcon	string \| undefined	not documented	Icon class of the dropdown icon.
chipIcon	string \| undefined	not documented	Icon class of the chip icon.
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.
showHeader	boolean	not documented	Whether to show the header.
filterBy	string \| undefined	not documented	When filtering is enabled, filterBy decides which field or fields (comma separated) to search against.
scrollHeight	string	not documented	Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
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.
loading	boolean \| undefined	not documented	Whether the multiselect is in loading state.
virtualScrollItemSize	number \| undefined	not documented	Height of an item in the list for VirtualScrolling.
loadingIcon	string \| undefined	not documented	Icon to display in loading state.
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.
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.
autofocusFilter	boolean	not documented	Applies focus to the filter element when the overlay is shown.
display	string \| 'comma' \| 'chip'	not documented	Defines how the selected items are displayed.
autocomplete	string	not documented	Defines the autocomplete is active.
showClear	boolean	not documented	When enabled, a clear icon is displayed to clear the value.
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
placeholder		not documented	Label to display when there are no selections.
options	any[] \| undefined	not documented	An array of objects to display as the available options.
filterValue	string \| undefined \| null	not documented	When specified, filter displays with this value.
selectAll	boolean \| undefined \| null	not documented	Whether all data is selected.
focusOnHover	boolean	not documented	Indicates whether to focus on options when hovering over them, defaults to optionLabel.
filterFields	any[] \| undefined	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.
highlightOnSelect	boolean	not documented	Whether the selected option will be add highlight class.
size	'large' \| 'small' \| undefined	undefined	Specifies the size of the component.
variant	'filled' \| 'outlined' \| undefined	undefined	Specifies the input variant of the component.
fluid		undefined	Spans 100% width of the container when enabled.
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<MultiSelectChangeEvent>	Callback to invoke when value changes.
onFilter	EventEmitter<MultiSelectFilterEvent>	Callback to invoke when data is filtered.
onFocus	EventEmitter<MultiSelectFocusEvent>	Callback to invoke when multiselect receives focus.
onBlur	EventEmitter<MultiSelectBlurEvent>	Callback to invoke when multiselect loses focus.
onClick	EventEmitter<Event>	Callback to invoke when component is clicked.
onClear	EventEmitter<void>	Callback to invoke when input field is cleared.
onPanelShow	EventEmitter<AnimationEvent>	Callback to invoke when overlay panel becomes visible.
onPanelHide	EventEmitter<AnimationEvent>	Callback to invoke when overlay panel becomes hidden.
onLazyLoad	EventEmitter<MultiSelectLazyLoadEvent>	Callback to invoke in lazy mode to load new data.
onRemove	EventEmitter<MultiSelectRemoveEvent>	Callback to invoke in lazy mode to load new data.
onSelectAllChange	EventEmitter<MultiSelectSelectAllChangeEvent>	Callback to invoke when all data is selected.

Template slot	Description
<ng-template #item>	Custom item template.
<ng-template #group>	Custom group template.
<ng-template #loader>	Custom loader 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 #selecteditems>	Custom selected items template.
<ng-template #loadingicon>	Custom loading icon template.
<ng-template #filtericon>	Custom filter icon template.
<ng-template #removetokenicon>	Custom remove token icon template.
<ng-template #chipicon>	Custom chip icon template.
<ng-template #clearicon>	Custom clear icon template.
<ng-template #dropdownicon>	Custom dropdown icon template.
<ng-template #itemcheckboxicon>	Custom item checkbox icon template.
<ng-template #headercheckboxicon>	Custom header checkbox icon template.

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.