Skip to content

SiSelectListHasFilterComponent documentation

selector
si-select-list-has-filter

Input Properties

Name Type Default Description
actionsTemplate
TemplateRef<any> Custom template for actions displayed below the options.
baseId
Required
string Base ID used to associate the listbox with its label.
filterPlaceholder
Required
TranslatableString Placeholder for search input field.
groupTemplate
TemplateRef<{ $implicit: SelectGroup<T> }> Custom template for rendering option groups.
labelledby
(string | null) null
noResultsFoundLabel
Required
TranslatableString Label if no item can be found.
optionTemplate
TemplateRef<{ $implicit: SelectOption<T> }> Custom template for rendering options.

Output Properties

Name Type Description
closeOverlay
void Emits when the listbox should close.

Types Documentation

Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
A select option group
Properties
An optional key to identify this group in a custom template.
key?: string
A label to be shown as header for this group. Is optional if a custom template is provided.
label?: TranslatableString
All options that are part of this group.
options: SelectOption<T>[]
Defines this to be a group.
type: "group"
A select option
Properties
Whether this option is disabled.
disabled?: boolean
An optional icon.
icon?: string
The color of an icon.
iconColor?: string
A label to be shown for this option. Is optional if a custom template is provided or if the value should directly be rendered.
label?: TranslatableString
An optional stacked icon.
stackedIcon?: string
The color of a stacked icon.
stackedIconColor?: string
Defines this to be an option.
type: "option"
Used for typeahead functionality when filtering is disabled. If provided, this will be used, otherwise the innerText of the rendered element.
typeaheadLabel?: TranslatableString
The value if this option.
It will be used for formControls and the value property of this si-select .
The value will internally be checked on equality by using === .
So an app should either use string or ensure that same values are referentially equal.

value: T

Except where otherwise noted, content on this site is licensed under MIT License.