This is a component made on top of the Mat Select component of the Material Angular library. The SearchMatSelect features a search box to find the avaliable options and a select all option, it as well offers keybord navigation for accessibility.
The source code is avaliable on Github and a demo is avaliable here.
-
- Install
search-mat-select
in your project.npm install search-mat-select
- Then, import the
SearchMatSelectModule
to yourapp.module.ts
.… import { SearchMatSelectModule } from 'search-mat-select'; @NgModule({ imports: [ … SearchMatSelectModule, … ], …
- Finally, use the component
lib-search-mat-select
wherever you want<lib-search-mat-select [data]="states" inputLabel="Brazilian States" [selectMultiple]="true" [showSelectAll]="true" selectAllLabel="Mark all" filterLabel="Search for a Brazilian state"> </lib-search-mat-select>
- Install
-
Use the attribute
data
.Note: the data passed to the search-select-mat-input MUST extend from the GenericData interface avaliable in the SearchSelectMatInputComponent class.
-
Use the attribute
inputLabel
to set the label/placeholder of the closed select input. -
Use the data binding attribute
[showSelectAll]
to enable showing the option.[showSelectAll]="true"
[showSelectAll]="false"
- Use the atribute
filterLabel
to set Select All checkbox label
-
Use the data binding attribute
[selectMultiple]
to switch between one option only or multiple selector.[selectMultiple]="true"
[selectMultiple]="false"
-
Use the
appearance
attribute as done in a mat input.appearance="legacy"
appearance="standard"
appearance="outline"
appearance="fill"
Note: Default appearance is
outline
-
Use the
floatLabel
attribute as done in a mat inputfloatLabel="auto"
floatLabel="always"
-
For now, there is only one event emitted from the
SearchSelectMatInput
.(selectionChange)
- This event emits
GenericData[]
every time an option is selected or deselected.
- This event emits
Navigation through keyboard is avaliable on this component, see bellow the avaliable navigation keys and shortcuts:
enter
- Opens the select options.
- Selects the hovered option.
up/down/left/right
- Navigates through the options.
Note: When clicked, the filter input will blur.
ctrl + s
- Focuses the filter input.
Note: shift + tab won't focus the filter input, instead use ctrl + s.
escape
- Unfocuses the filter input.
- Closes the select options.
Note:
tab
will NOT navigate properly inside selects overall, this neither.