Skip to content

SiSearchBarInputDirective documentation

selector
input[siSearchBarInput]

Input used by SiSearchBarComponent instead of its default input.

Input Properties

Name Type Default Description
disabled
 boolean false
readonly
 boolean false

Attributes and Methods

Name Type Default Description
onChange
 (_: any) => void The registered callback function called when a change or input event occurs on the input element.
@docs-private
onReset()
 () => void
onTouched
 () => void The registered callback function called when a blur event occurs on the input element.
@docs-private
ɵdir
 unknown
ɵfac
 ɵɵFactoryDeclaration<DefaultValueAccessor, [ null, null, { optional: true } ]>
registerOnChange(...)
 (fn: (_: any) => }) => {void Registers a function called when the control value changes.
@docs-private

Parameters}) => {
registerOnTouched(...)
 (fn: () => void) => void Registers a function called when the control is touched.
@docs-private

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
implements OnInit, OnDestroy, ControlValueAccessor, OnChanges
Class
▶
Constructor
() => {}
Properties
Aria label for the clear button.
clearButtonAriaLabel: InputSignal<TranslatableString> = $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:Clear`
Color to use for component background
colorVariant: InputSignal<BackgroundColorVariant> = 'base-1'
debouncer: Subject<string> = ...
Time unit change of search input takes effect.

Deprecated: Use a content-projected input and debounce its form value changes in application code, for example with RxJS debounceTime on FormControl.valueChanges : 
<si-search-bar>
  <input siSearchBarInput [formControl]="searchControl">
</si-search-bar>



typescript
searchControl.valueChanges.pipe(debounceTime(400));
debounceTime: InputSignalWithTransform<number, unknown> = 400
disabled: Signal<boolean> = ...
Whether the input is disabled.

Deprecated: Use a content-projected input with disabled applied directly to it: 
<si-search-bar>
  <input siSearchBarInput disabled>
</si-search-bar>
disabledInput: InputSignalWithTransform<boolean, unknown> = false
disabledNgControl: WritableSignal<boolean> = ...
icons: Record<("elementCancel" | "elementSearch"), string> = ...
inputDisabled: Signal<boolean> = ...
inputReadonly: Signal<boolean> = ...
inputRef: Signal<(ElementRef<HTMLInputElement> | undefined)> = ...
isInvalid: boolean = false
Defines the maximum length of the search input.

Deprecated: Use a content-projected input with maxlength applied directly to it: 
<si-search-bar>
  <input siSearchBarInput maxlength="100">
</si-search-bar>
maxlength: InputSignalWithTransform<(number | undefined), unknown> = undefined
Define search input placeholder.

Deprecated: Use a content-projected input with placeholder applied directly to it: 
<si-search-bar>
  <input siSearchBarInput placeholder="Search">
</si-search-bar>
placeholder: InputSignal<string> = ''
Prohibited characters restricting search.

Deprecated: Use a reactive FormControl or Signal Forms on a content-projected input to validate prohibited characters: 
<si-search-bar>
  <input siSearchBarInput [formControl]="searchControl">
</si-search-bar>


Or with Signal Forms: 
<si-search-bar>
  <input siSearchBarInput [formField]="searchForm.search">
</si-search-bar>
prohibitedCharacters: InputSignal<(string | undefined)> = ...
projectedInput: Signal<(SiSearchBarInputDirective | undefined)> = ...
Whether the input can be focused but not edited.

Deprecated: Use a content-projected input with readonly applied directly to it: 
<si-search-bar>
  <input siSearchBarInput readonly>
</si-search-bar>
readonly: InputSignalWithTransform<boolean, unknown> = false
Output callback event will provide you with search term if search input changes.

Deprecated: Use a content-projected input and observe FormControl.valueChanges or the field value signal with Signal Forms: 
<si-search-bar>
  <input siSearchBarInput [formControl]="searchControl">
</si-search-bar>


Or with Signal Forms: 
<si-search-bar>
  <input siSearchBarInput [formField]="searchForm.search">
</si-search-bar>
searchChange: OutputEmitterRef<string> = ...
searchValue: WritableSignal<string> = ...
Display search icon before search input.
showIcon: InputSignalWithTransform<boolean, unknown> = false
Define search input content.

Deprecated: Use a content-projected input with value applied directly to it: 
<si-search-bar>
  <input siSearchBarInput value="Search term">
</si-search-bar>
value: InputSignal<(string | undefined)> = ...
Methods
focus: () => void
getInput: () => (HTMLInputElement | undefined)
(event: Event) => void
Parameters
event: Event
(searchString: (string | null)) => boolean
Parameters
searchString: (string | null)
(changes: { clearButtonAriaLabel: t(() =​> $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:Clear`), colorVariant: 'base-1', debounceTime: 400, disabledInput: false, focus: SimpleChange<() => void>, maxlength: undefined, ngOnChanges: SimpleChange<(changes: { readonly debounceTime?: SimpleChange<number> | undefined; readonly prohibitedCharacters?: SimpleChange<string | undefined> | undefined; readonly placeholder?: SimpleChange<...> | undefined; ... 15 more ...; focus?: SimpleChange<...> | undefined; }) => void>, ngOnDestroy: SimpleChange<() => void>, ngOnInit: SimpleChange<() => void>, placeholder: '', prohibitedCharacters: SimpleChange<(string | undefined)>, readonly: false, registerOnChange: SimpleChange<(fn: any) => void>, registerOnTouched: SimpleChange<(fn: () => void) => void>, searchChange: SimpleChange<OutputEmitterRef<string>>, setDisabledState: SimpleChange<(disabled: boolean) => void>, showIcon: false, value: SimpleChange<(string | undefined)>, writeValue: SimpleChange<(value: string) => void> }) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: { clearButtonAriaLabel: t(() =​> $localize`:@@SI_SEARCH_BAR.CLEAR_BUTTON:Clear`), colorVariant: 'base-1', debounceTime: 400, disabledInput: false, focus: SimpleChange<() => void>, maxlength: undefined, ngOnChanges: SimpleChange<(changes: { readonly debounceTime?: SimpleChange<number> | undefined; readonly prohibitedCharacters?: SimpleChange<string | undefined> | undefined; readonly placeholder?: SimpleChange<...> | undefined; ... 15 more ...; focus?: SimpleChange<...> | undefined; }) => void>, ngOnDestroy: SimpleChange<() => void>, ngOnInit: SimpleChange<() => void>, placeholder: '', prohibitedCharacters: SimpleChange<(string | undefined)>, readonly: false, registerOnChange: SimpleChange<(fn: any) => void>, registerOnTouched: SimpleChange<(fn: () => void) => void>, searchChange: SimpleChange<OutputEmitterRef<string>>, setDisabledState: SimpleChange<(disabled: boolean) => void>, showIcon: false, value: SimpleChange<(string | undefined)>, writeValue: SimpleChange<(value: string) => void> }
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
onBlur: () => void
(event: Event) => void
Parameters
event: Event
(val: any) => void
Parameters
val: any
onTouch: () => void
(fn: any) => void from ControlValueAccessor.registerOnChange
Parameters
fn: any
(fn: () => void) => void from ControlValueAccessor.registerOnTouched
Parameters
fn: () => void
resetForm: () => void
(disabled: boolean) => void from ControlValueAccessor.setDisabledState
Parameters
disabled: boolean
(value: string) => void
Parameters
value?: string
(value: string) => void
Parameters
value: string
(value: string) => void from ControlValueAccessor.writeValue
Parameters
value: string

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