Skip to content

SiSelectMultiValueDirective documentation

selector
si-select[multi]

The directive enables the multi-select behavior. Otherwise, use the SiSelectSingleValueDirective directive.

Example:

<si-select multi [(value)]="multiValue" [options]="[
 { id: 'good', title: 'Good' },
 { id: 'average', title: 'Average' },
 { id: 'poor', title: 'Poor' }
]"></si-select>

Input Properties

NameTypeDefaultDescription
disabled
booleanfalseWhether the select input is disabled.
(writeonly) value
(undefined | IV)The selected value(s).

Output Properties

NameTypeDescription
valueChange
T[]Emitted when the selection is changed

Attributes and Methods

NameTypeDefaultDescription
(readonly) allowMultiple
truetrueSiSelectSelectionStrategy#allowMultiple
registerOnChange(...)
(fn: any) => void@description: Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

@usageNotes: ### Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) =​> void): void { this._onChange = fn; }

When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: { '(change)': '_onChange($event.target.value)' }

Parameters
  • fn: any  The callback function to register
registerOnTouched(...)
(fn: any) => void@description: Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

@usageNotes: ### Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void { this._onTouched = fn; }

On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: { '(blur)': '_onTouched()' }

Parameters
  • fn: any  The callback function to register
setDisabledState(...)
(isDisabled: boolean) => void@description: Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

@usageNotes: The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void { this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled); }

Parameters
  • isDisabled: boolean  The disabled status to set on the element
writeValue(...)
(obj: any) => void@description: Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

@usageNotes: ### Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'value', value); }

Parameters
  • obj: any  The new value for the element

Types Documentation

<T> extends SiSelectSelectionStrategy<T, T>
The directive enables the single-select behavior. Otherwise, use the SiSelectMultiValueDirective directive.

Example:
<si-select [(value)]="selectedValue" [options]="[
 { id: 'good', title: 'Good' },
 { id: 'average', title: 'Average' },
 { id: 'poor', title: 'Poor' }
]"></si-select>
Constructor
() => {} from SiSelectSelectionStrategy<T, T>.constructor
Properties
SiSelectSelectionStrategy#allowMultiple
allowMultiple: boolean = false
Provides the internal value always as an array
arrayValue: Signal<readonly T[]> from SiSelectSelectionStrategy.arrayValue = ...
disabled: Signal<boolean> from SiSelectSelectionStrategy.disabled = ...
Whether the select input is disabled.
disabledInput: InputSignalWithTransform<boolean, unknown> from SiSelectSelectionStrategy.disabledInput = false
onChange: (_: any) => void from SiSelectSelectionStrategy.onChange = ...
Registered form callback which shall be called on blur.
onTouched: () => void from SiSelectSelectionStrategy.onTouched = ...
Emitted when the selection is changed
valueChange: OutputEmitterRef<T> from SiSelectSelectionStrategy.valueChange = ...
Accessors
The selected value(s).
set value: (value: (undefined | IV)) from SiSelectSelectionStrategy.value
Methods
(readonly T[]) => T
Parameters
Parameter: readonly T[]
(fn: any) => void from SiSelectSelectionStrategy.registerOnChange
@description: Registers a callback function that is called when the control's value changes in the UI.

This method is called by the forms API on initialization to update the form model when values propagate from the view to the model.

When implementing the registerOnChange method in your own value accessor, save the given function so your class calls it at the appropriate time.

@usageNotes: ### Store the change function

The following example stores the provided function as an internal method.

registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}


When the value changes in the UI, call the registered function to allow the forms API to update itself:

host: {
   '(change)': '_onChange($event.target.value)'
}
Parameters
The callback function to register
fn: any
(fn: any) => void from SiSelectSelectionStrategy.registerOnTouched
@description: Registers a callback function that is called by the forms API on initialization to update the form model on blur.

When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".

@usageNotes: ### Store the callback function

The following example stores the provided function as an internal method.

registerOnTouched(fn: any): void {
  this._onTouched = fn;
}


On blur (or equivalent), your class should call the registered function to allow the forms API to update itself:

host: {
   '(blur)': '_onTouched()'
}
Parameters
The callback function to register
fn: any
(isDisabled: boolean) => void from SiSelectSelectionStrategy.setDisabledState
@description: Function that is called by the forms API when the control status changes to or from 'DISABLED'. Depending on the status, it enables or disables the appropriate DOM element.

@usageNotes: The following is an example of writing the disabled property to a native DOM element:

setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}
Parameters
The disabled status to set on the element
isDisabled: boolean
(value: (undefined | T)) => readonly T[]
Parameters
value: (undefined | T)
(values: T[]) => void from SiSelectSelectionStrategy.updateFromUser
CDK Listbox value changed handler.
Parameters
values: T[]
(obj: any) => void from SiSelectSelectionStrategy.writeValue
@description: Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic changes from model to view are requested.

@usageNotes: ### Write a value to the element

The following example writes a value to the native DOM element.

writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}
Parameters
The new value for the element
obj: any

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