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>

Attribute	Attribute type	Default value	Description
placeholder	string	null	Placeholder for the input field
disabled	boolean	false	Should the input field be disabled
required	boolean	false	Is the form field required
masterToggle	boolean	true	Display 'All' checkbox to trigger master selection toggle
info-key	string	null	Display info values for each dropdown option. Value should be a key in the input array of objects
alignInfoRight	boolean	false	Align info display to right (true) or left (false) for each dropdown option
icon	string	"arrow_drop_down"	Icon suffix: Material icon keys
hint	string	null	Description / hint