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