NgxMatMSAutocomplete

Ngx Mat MultiSelect Autocomplete is a simple multiselect dropdown with master toggle and autocomplete filter, designed with angular material. NPMJS: ngx-mat-msautocomplete

What is it good for?

The library allows you to:

Create a multiselect component with an array of objects (list) as input
2 way data binding with the input list. New key 'selection : boolean' will be added to each object of the input list
Autocomplete search filter to find matching options in list, filtering in display text and if present, info text
Master toggle to select all or clear all selection

Dependencies

"@angular/common": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/material": "^8.2.3",
"@angular/cdk": "^8.2.3"

Installation

Add Angular material to your project:
```
$ ng add @angular/material
```
Add Angular cdk to your project:
```
$ ng add @angular/cdk
```
Install NgxMatMSAutocomplete
```
$ npm i ngx-mat-msautocomplete --save
```

Include ngx-mat-msautocomplete in your app.module.ts

...
import { NgxMatMSAutocompleteModule } from 'ngx-mat-msautocomplete';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    NgxMatMSAutocompleteModule
  ],
  ...
})

Add the selector in your component.html file:

<mat-ms-auto [(dropdownList)]="dropdownList" display-key="display"></mat-ms-auto>

Example

Dropdown options - Input array of objects in TS file

fruitsList = [
  {
    info: 'This is apple',
    name: 'Apple'
  }, {
    info: 'This is orange',
    name: 'Orange'
  }, {
    info: 'This is lemon',
    name: 'Lemon'
  }, {
    info: 'This is gauva',
    name: 'Gauva'
  }, {
    info: 'This is banana',
    name: 'Banana'
  }, {
    info: 'This is kiwi',
    name: 'Kiwi'
  }
];

Ngx Mat MultiSelect Autocomplete component in HTML file

<mat-ms-auto [(dropdownList)]="fruitsList" display-key="name"></mat-ms-auto>

dropdownList - Required
display-key - Required

Call method on change / selection:

<mat-ms-auto [(dropdownList)]="fruitsList" display-key="name" (selectionChanged)="onChange()"></mat-ms-auto>

Default selection: To select an option by default, add a key => 'selection: true' to the required option in the input array of objects: Example:

fruitsList = [
  {
    info: 'This is apple',
    name: 'Apple',
    selection: true
  }, {
    info: 'This is orange',
    name: 'Orange',
    selection: false
  },
  ...
];

Other Options (Optional)

<mat-ms-auto 
name="mat-ms-auto"
placeholder="Types of fruits"
[(dropdownList)]="fruitsList"
display-key="name"
info-key="info"
(selectionChanged)="onChange()"
[masterToggle]="true"
[alignInfoRight]="true"
icon="arrow_drop_down"
hint="List of fruits"
disabled
required></mat-ms-auto>