1.0.2 • Published 7 months ago
ng2-mat-multiselect v1.0.2
ng2-mat-multiselect
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
oroutline
. - 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-multiselect --save
Import in your module file
import { Ng2MatMultiselectModule } from 'ng2-mat-multiselect'; imports: [ ... Ng2MatMultiselectModule ],
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
<ng2-mat-multiselect
[item]="dataToPass"
[appearance]="appearance"
[inputTitle]="title"
[displayKey]="displayKey"
[searchKey]="searchKeys"
[color]="color"
(selectedItems) = "onSelectitems($event)">
</ng2-mat-multiselect>
Output: