Nightingale Posing Mischievously

    ngx-mat-msautocomplete

    1.0.0 • Public • Published

    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

    Install

    npm i ngx-mat-msautocomplete

    DownloadsWeekly Downloads

    79

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    80.3 kB

    Total Files

    55

    Last publish

    Collaborators

    • sachinrdoss