ng2-mat-multi-select
Angular material select box with multiple selection and search support.
Features
- Plugin Accepts your original array means no modification in your array is required.
- Multiple options selection and display the options as
mat-chips.
- Searching in select box list with custom keys.
- Support Custom key as a display label in the list.
- Supports material theme pallet colors.
- Set form field appearance as
fill or outline.
- Set custom input field label.
- AoT compilation and lazy loading compatible.
- Fewer dirty checks and higher performance.
Quickstart
-
Install Angular material
ng add @angular/material
-
Install the library
npm install ng2-mat-multi-select --save
-
Import in your module file
imports: [
...
Ng2MatMultiSelectModule
],
Options
| Option | Type | Default | Description |
|---|
| item | Array | [ ] | The list of data for selectbox list |
| displaykey | string | - | The value of the given displaykey will displayed in the select list |
| searchkeys | Array of strings | [ ] | Search keys on which search should occur |
| color | string | Primary | Mat theme palette color |
| appearance | string | Outline | Mat form field appearance, Outline or Fill |
| inputTitle | string | - | Label of selectbox |
| @Output() selectedItems | EventEmitter | - | On select/unselect any checkbox, returns selected options |
Example
In app.component.ts file
dataToPass : {sn: string, tn: string}[] = [
{sn: 'apple', tn: 'Apple'},
{sn: 'lemon', tn: 'Lemon'},
{sn: 'lime', tn: 'Lime'},
{sn: 'orange', tn: 'Orange'},
{sn: 'strawberry', tn: 'Strawberry'},
]
displayKey : string = 'tn';
searchKeys : string[] = ['sn', 'tn'];
color : ThemePalette = 'primary';
inputTitle : string = 'Fruits';
appearance : string = 'outline';
In app.component.html file
<lib-ng2-mat-multi-select
[item]="dataToPass"
[appearance]="appearance"
[inputTitle]="title"
[displayKey]="displayKey"
[searchKey]="searchKeys"
[color]="color"
(selectedItems) = "onSelectitems($event)">
</lib-ng2-mat-multi-select>
Output:
