Angular multiselect dropdown component for web applications. Easy to integrate and use. It can be bind to any custom data source.

• dropdown with single/multiple selction option
• bind to any custom data source
• search item with custom placeholder text
• limit selection
• select/de-select all items

npm i ng-multiselect-dropdown-angular7 --save

And then include it in your module (see app.module.ts):

import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown-angular7';
// ...

@NgModule({
  imports: [
    NgMultiSelectDropDownModule.forRoot()
    // ...
  ]
  // ...
})
export class AppModule {}

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  dropdownList = [];
  selectedItems = [];
  dropdownSettings = {};
  ngOnInit() {
    this.dropdownList = [
      { item_id: 1, item_text: 'Mumbai' },
      { item_id: 2, item_text: 'Bangaluru' },
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' },
      { item_id: 5, item_text: 'New Delhi' }
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'Pune' },
      { item_id: 4, item_text: 'Navsari' }
    ];
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 3,
      allowSearchFilter: true
    };
  }
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }
}

<ng-multiselect-dropdown-angular7
  [placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
  (onSelect)="onItemSelect($event)"
  (onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown-angular7>

• onSelect - Return the selected item when an item is checked. Example : (onSelect)="onItemSelect($event)"
• onSelectAll - Return the all items. Example : (onSelectAll)="onSelectAll($event)".
• onDeSelect - Return the unselected item when an item is unchecked. Example : (onDeSelect)="onItemDeSelect($event)"
• onFilterChange - Return the key press. Example : (onFilterChange)="onFilterChange($event)"
• onDropDownClose- Example : (onDropDownClose)="onDropDownClose()"

• Clone the repository or downlod the .zip,.tar files.
• Run npm install
• Run ng serve for a dev server
• Navigate to https://localhost:4200/

Run yarn build:lib to build the library and generate an NPM package. The build artifacts will be stored in the dist-lib/ folder.

Run yarn test to execute the unit tests.

This project was generated with Angular CLI version 1.7.1.

Contributions are welcome, please open an issue and preferrably file a pull request.

Please share sample code using codesandbox.com or stackblitz.com to help me re-produce the issue.

MIT License.