Skip to content

Select Form Control

The select Form Control wraps Angular Material's mat-select.

HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<its-form-control
    select
    [formControl]="myControl"
    label="Item"
    placeholder="Select an item"
    [availableValues]="myItems$ | async"
    valueField="key"
    displayNameField="key"
    [multiple]="false"
    (selectionChange)="itemSelected($event)"
>
</its-form-control>

Inputs

  1. availableValues: an array of items, the data source.
  2. displayNameField: the field of each item that will be shown to the user.
  3. valueField: the field of each item that will be set as the value for the Form Control.
  4. multiple: whether it's multiple selection or not.

Outputs

selectionChange can be used to receive an event when a selection is made. Usually, you wanna use this in combination with [multiple] to simplify typings.

Configuring [multiple] also configures the resulting type of selectionChange. It will either be a SingleSelectionChangeEvent or a MultiSelectionChangeEvent, depending on the value of [multiple].

Example

HTML
1
2
3
4
5
6
<its-form-control
    select
    [multiple]="false"
    (selectionChange)="itemSelected($event)"
>
</its-form-control>
TypeScript
1
2
3
4
5
6
class MyComponent {
    public itemSelected(event: SingleSelectionChangeEvent<MyItem, string>) {
        // event.item contains the MyItem instance
        // event.value contains the value of the valueField
    }
}