Skip to content

SiFilteredSearchComponent documentation

selector
si-filtered-search

Input Properties

NameTypeDefaultDescription
clearButtonLabel
TranslatableString$localize`:@@SI_FILTERED_SEARCH.CLEAR:Clear`Clear button aria label. Needed for a11y
colorVariant
BackgroundColorVariant'base-1'Color variant to determine component background
criteria
CriterionDefinition[][]Predefine criteria options.
disabled
booleanfalseDisable any interactivity.
disableFreeTextSearch
booleanfalseDisables the free text search to only use the criterion for filtering.
disableSelectionByColonAndSemicolon
booleanfalseBy default, the Filtered Search will treat : as a special character to submit the current input in the freetext and immediately create a criterion. Use this input to disable this behavior.
doSearchOnInputChange
booleanfalseIf this is set to true , the search triggers for each input (implicit search). By default, the search is triggered when the user submits by pressing the search button or by pressing enter.
exclusiveCriteria
booleanfalseOpt-in to search for each criterion only once.
freeTextCriterion
CriterionDefinitionCriterion definition for free-text pills. When set, free-text values will be added as a pill with this criterion. If not set, free-text pills are disabled.

Enabling this will only emit valueChange events when the free-text pill is created. When the text input is blurred and there is text inside, a free-text pill will be created.
itemCountText
TranslatableString$localize`:@@SI_FILTERED_SEARCH.ITEM_COUNT:{{itemCount}} items`Items count text appended to the count in case of multi-selection of values. Translation key, {{itemCount}} in the translation will be replaced with the actual value.
lazyCriterionProvider
(typed: string, searchCriteria: SearchCriteria) => Observable<CriterionDefinition[]>In addition to lazy loaded value, you can also lazy load the criteria itself
lazyLoadingDebounceTime
number500Custom debounce time for lazy loading of criteria data.
lazyValueProvider
(criterionName: string, typed: (string | string[])) => Observable<OptionType[]>In many cases, your application defines the criteria, but the values need to be loaded from a server. In this case you can provide a function that returns the possible criterion options as an Observable.
maxCriteria
numberundefinedLimit the number of possible criteria. The default is undefined so that any number of criteria can be used. For example, setting the value to 1 let you only select one criterion that you need to remove before being able to set another one.
maxCriteriaOptions
number20Defines the maximum options within one criterion. The default is 20 and 0 means unlimited.
onlySelectValue
booleanfalseLimit criterion options to the predefined ones and prevent typing. [onlySelectValue] enforces [strictValue] and [strictCriterion] to true automatically.
optionsInScrollableView
number10Defines the number of criteria, criteria values and operators visible at once.
placeholder
string''The placeholder for input field.
searchCriteria
SearchCriteria{ criteria: [], value: '' }The current selected search criteria and entered search text.
searchDebounceTime
number0Custom debounce time (in mills) to delay the search emission. (Default is 0 as in most cases a users manually triggers a search. Recommended to increase a bit when using doSearchOnInputChange=true)
searchForFreeTextLabel
TranslatableString$localize`:@@SI_FILTERED_SEARCH.SEARCH_FOR_FREE_TEXT:Search for "{{query}}"`The value to be shown for creating free-text pills. Use the {{query}} placeholder to show the user input in the label.
searchLabel
TranslatableString$localize`:@@SI_FILTERED_SEARCH.SEARCH:Search`Search input aria label, Needed by a11y
strictCriterion
booleanfalseLimit criteria to the predefined ones.
strictValue
booleanfalseLimit criterion options to the predefined ones. [strictValue] enforces [strictCriterion] to true automatically.
submitButtonLabel
TranslatableString$localize`:@@SI_FILTERED_SEARCH.SUBMIT_BUTTON:Submit search`The accessible label of the search button.
typeaheadOptionsLimit
number20Limit on the number of criteria/criteria value to be displayed by the typeahead

Output Properties

NameTypeDescription
doSearch
SearchCriteriaOutput callback event that provides an object describing the selected criteria and additional filter text.
interceptDisplayedCriteria
DisplayedCriteriaEventArgsThe interceptor is called when the list of criteria is shown as soon as the user starts typing in the input field. The interceptor's DisplayedCriteriaEventArgs.allow method can be used to filter the list of displayed criteria.

Note: The interceptor is called as long as the searchCriteria does not exceed maxCriteria . Further, the interceptor is not called when using the lazyCriterionProvider .

Example: <​si-filtered-search [criteria]="[{ name: 'foo', label: 'Foo' }, { name: 'bar', label: 'Bar' }]" (interceptDisplayedCriteria)="$event.allow( $event.searchCriteria.criteria.some(s =​> s.name === 'foo') ? $event.criteria.filter(c =​> c !== 'foo') : $event.criteria )"​> <​/si-filtered-search​>
searchCriteriaChange
SearchCriteriaThe current selected search criteria and entered search text.

Attributes and Methods

NameTypeDefaultDescription
deleteAllCriteria(...)
(event: MouseEvent) => voidDeletes all currently selected criteria and effectively resets the filtered search.

Parameters

Types Documentation

(string & Translatable)
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.
("base-1" | "base-0")
Use this type with filter components colorVariant to render component variants based on background of container
A CriterionDefinition is the definition of criteria in the SiFilteredSearchComponent . It defines the type and based this further attributes like multiselect and available options.
Properties
Optional configuration object for the datepicker.
datepickerConfig?: DatepickerInputConfig
An optional label, which is used in the user interface.
label?: TranslatableString
Defines whether multi selection of the options is possible in a typeahead. Setting it to true enables the checkbox besides the option values. When multiSelect is true , the value input field will be readonly, allowing user to select the values only from the typeahead.
multiSelect?: boolean
The mandatory name of a criterion.
name: string
Limit criterion options to the predefined ones and prevent typing. onlySelectValue enforces strictValue to true automatically.
onlySelectValue?: boolean
This provides possible operators that the user can select for this criterion.
operators?: string[]
The options provide possible values that the user can select for this criterion.
options?: OptionType[]
Limit criterion options to the predefined ones.
strictValue?: boolean
This provides the value type of the input field.
validationType?: ValidationType
On search, the filtered search component emits a SearchCriteria object. It consists of all user selected criteria and the free text input value.
Properties
The selected criteria of the filtered search. Each criteria has a name and a value.
criteria: CriterionValue[]
Additional unstructured free text, which the user entered in the search.
value: string
Event allows to intercept and change the displayed criteria before shown in typeahead.
Properties
List of criteria names to display in typeahead.
criteria: string[]
Current search criteria.
searchCriteria: SearchCriteria
Methods
(criteriaNamesToDisplay: string[], freeText: boolean) => void
Interceptor function allows to reduce the list of displayed criteria.
Parameters
list of criteria names to be displayed.
criteriaNamesToDisplay: string[]
indicates whether free text pills are allowed.
freeText?: boolean
Translatable
import
extends DatepickerConfig
Properties
Similar to dateTimeFormat , but used when only a date is displayed (e.g. when showTime === false or disabledTime === true ). Only numeric date formats are supported.
dateFormat?: string
A custom date/time format according the Angular date pipe (see https://angular.dev/api/common/DatePipe ). Only numeric date formats are supported. The format is used to render the time of a date-time criterion. If not specified, mediumTime is used if the showSeconds flag is true, otherwise shortTime as default. For the date-only case, 'shortDate' is used.
dateTimeFormat?: string
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean from disabledTime
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString from disabledTimeText
Options to turn on date range selection.
enableDateRange?: boolean from enableDateRange
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString from enabledTimeText
Consider time with minDate and maxDate
enableTimeValidation?: boolean from enableTimeValidation
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean from enableTwoMonthDateRange
endTimeLabel?: string from endTimeLabel
hideLabels?: boolean from hideLabels
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean from hideWeekNumbers
hoursAriaLabel?: string from hoursAriaLabel
hoursLabel?: string from hoursLabel
hoursPlaceholder?: string from hoursPlaceholder
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean from mandatoryTime
Maximal (latest) selectable date.
maxDate?: Date from maxDate
meridians?: string[] from meridians
meridiansAriaLabel?: string from meridiansAriaLabel
meridiansLabel?: string from meridiansLabel
millisecondsAriaLabel?: string from millisecondsAriaLabel
millisecondsLabel?: string from millisecondsLabel
millisecondsPlaceholder?: string from millisecondsPlaceholder
Minimal (earliest) selectable date.
minDate?: Date from minDate
minutesAriaLabel?: string from minutesAriaLabel
minutesLabel?: string from minutesLabel
minutesPlaceholder?: string from minutesPlaceholder
Only month and year are selectable.
onlyMonthSelection?: boolean from onlyMonthSelection
secondsAriaLabel?: string from secondsAriaLabel
secondsLabel?: string from secondsLabel
secondsPlaceholder?: string from secondsPlaceholder
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean from showMilliseconds
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean from showMinutes
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean from showSeconds
Defines the timepicker visibility. Default is false .
showTime?: boolean from showTime
startTimeLabel?: string from startTimeLabel
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString from todayText
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart from weekStartDay
(string | OptionCriterion)
Type for options
("string" | "integer" | "float" | "date" | "date-time")
A CriterionValue is the input/output value of the SiFilteredSearchComponent , containing the user input.
Properties
If the criterion was defined as date or date-time this field will contain the value das js Date.
dateValue?: Date
The mandatory name of a criterion.
name: string
This property holds the selected or entered operator of the criterion.
operator?: string
The value property holds the selected or entered value/values of the criterion. The value can also be passed as an array of strings. When multiSelect is enabled, the items in the value array will be shown as selected values in value input and the typeahead.
value?: (string | string[])
Wrapper around an actual translation framework which is meant to be used internally by Element. Applications must not use this service.

Use injectSiTranslateService to get an instance of the translation service.
Constructor
() => {}
Properties
documentRef: any
prevent$LocalizeInit?: boolean
translationChange$: Observable<void>
ɵfac: unknown
ɵprov: ɵɵInjectableDeclaration<SiTranslateService>
Accessors
The available languages.
get availableLanguages: readonly string[]
set availableLanguages: (languages: string[])
The currently used language.
get currentLanguage: (undefined | string)
If the underlying translation library supports switching the language and/or updating the translation texts, this observable will emit. There is no initial emit.
get translationChange: Observable<void>
Methods
The language to be used as default.
Returns The code of the default language.
getDefaultLanguage: () => (null | string)
(lang: string) => Observable<void>
Sets a new language to be used. If needed, loads the language file.
Returns An observable that emits when the new language is loaded and activated.
Parameters
The language to be used.
lang: string
(lang: string) => void
The language to be used as default.
Parameters
The language code.
lang: string
(lang: string) => void
Parameters
lang: string
(key: string, value: string) => void
If supported by the underlying translation library, this method can be used to add a translation for a specific key.
It is intended to be used for adding the english default value.
It will be called whenever a key within element is resolved.
An implementation of this method must check that it does not override an existing translation.
Parameters
key: string
value: string
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => (TranslationResult<T> | Observable<TranslationResult<T>>)
Translates the key(s) by using the underlying translation library.
Returns Returns the translated key or an object with the translated keys. Depending on the underlying translation library (sync/async) the result will be wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => Observable<TranslationResult<T>>
Translates the key(s) by using the underlying translation library in an asynchronous manner. It will emit each time the active language is changed.
Returns Returns the translated key or an object with the translated keys wrapped in an Observable.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
<(T: (string | string[]))> (keys: T, params: Record<string, unknown>) => TranslationResult<T>
Translates the key(s) by using the underlying translation library in a synchronous manner.

Warning: The caller of this function needs to make sure the translation file(s) are already loaded. It is generally not recommended to use this function unless you know exactly what you are doing.

Returns Returns the translated key or an object with the translated keys.
Parameters
A single translation key or an array of keys.
keys: T
Parameters to be replaced within the translation text.
params?: Record<string, unknown>
Properties
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString
Options to turn on date range selection.
enableDateRange?: boolean
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString
Consider time with minDate and maxDate
enableTimeValidation?: boolean
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean
endTimeLabel?: string
hideLabels?: boolean
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean
hoursAriaLabel?: string
hoursLabel?: string
hoursPlaceholder?: string
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean
Maximal (latest) selectable date.
maxDate?: Date
meridians?: string[]
meridiansAriaLabel?: string
meridiansLabel?: string
millisecondsAriaLabel?: string
millisecondsLabel?: string
millisecondsPlaceholder?: string
Minimal (earliest) selectable date.
minDate?: Date
minutesAriaLabel?: string
minutesLabel?: string
minutesPlaceholder?: string
Only month and year are selectable.
onlyMonthSelection?: boolean
secondsAriaLabel?: string
secondsLabel?: string
secondsPlaceholder?: string
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean
Defines the timepicker visibility. Default is false .
showTime?: boolean
startTimeLabel?: string
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart
It allows to specify a different value between the one which is rendered and the one which is used for the search.
Properties
The icon to be displayed besides value in the typeahead
iconClass?: string
The label to show
label?: TranslatableString
Shows whether the option is selected in the multi-select dropdown
selected?: boolean
The value to use on searching
value: string
() => SiTranslateService
Variable
("monday" | "saturday" | "sunday" | undefined)
(string | { [ key in (string | number) ]: any })
A singular item to be used in the typeahead. Can be either a string or an object.
<T> T extends string ? string : Record<string, string>

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