tree: 6ba448992e722b44e731560ef637e450292ded55 [path history] [tgz]
  1. docs/
  2. src/
  3. .angular-cli.json
  4. .editorconfig
  5. .gitignore
  6. .npmignore
  7. angular2-multiselect-dropdown.ts
  8. karma.conf.js
  9. package.json
  10. protractor.conf.js
  12. tsconfig.json
  13. tslint.json

Angular2 Multiselect Dropdown

npm version

Angular 2 multiselect dropdown component for web applications. Easy to integrate and use.

Documentation | Demo.

Getting Started


  • The Mutiselect Dropdown package is published on the npm Registry.

  • Install the package : npm install angular2-multiselect-dropdown

  • Once installed import AngularMultiSelectModule from the installed package into your module as follows:


Import AngularMultiSelectModule into NgModule in app.module.ts

import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';

  // ...
  imports: [
  // ...

Declare the component data variables and options in your component where you want to consume the dropdown component.

import { Component, OnInit } from '@angular/core'; export class AppComponent implements OnInit { dropdownList = []; selectedItems = []; dropdownSettings = {}; ngOnInit(){ this.dropdownList = [ {"id":1,"itemName":"India"}, {"id":2,"itemName":"Singapore"}, {"id":3,"itemName":"Australia"}, {"id":4,"itemName":"Canada"}, {"id":5,"itemName":"South Korea"}, {"id":6,"itemName":"Germany"}, {"id":7,"itemName":"France"}, {"id":8,"itemName":"Russia"}, {"id":9,"itemName":"Italy"}, {"id":10,"itemName":"Sweden"} ]; this.selectedItems = [ {"id":2,"itemName":"Singapore"}, {"id":3,"itemName":"Australia"}, {"id":4,"itemName":"Canada"}, {"id":5,"itemName":"South Korea"} ]; this.dropdownSettings = { singleSelection: false, text:"Select Countries", selectAllText:'Select All', unSelectAllText:'UnSelect All', enableSearchFilter: true, classes:"myclass custom-class" }; } onItemSelect(item:any){ console.log(item); console.log(this.selectedItems2); } OnItemDeSelect(item:any){ console.log(item); console.log(this.selectedItems2); } onSelectAll(items: any){ console.log(items); } onDeSelectAll(items: any){ console.log(items); } }

Add the following component tag in you template

<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems" 


The following list of settings are supported by the component. Configure the settings to meet your requirement.

SettingTypeDescriptionDefault Value
singleSelectionBooleanTo set the dropdown for single item selection only.false
textStringText to be show in the dropdown, when no items are selected.‘Select’
enableCheckAllBooleanEnable the option to select all items in listfalse
selectAllTextStringText to display as the label of select all optionSelect All
unSelectAllTextStringText to display as the label of unSelect optionUnSelect All
enableSearchFilterBooleanEnable filter option for the list.false
maxHeightNumberSet maximum height of the dropdown list in px.300
badgeShowLimitNumberLimit the number of badges/items to show in the input field. If not set will show all selected.All
classesStringCustom classes to the dropdown component. Classes are added to the dropdown selector tag. To add multiple classes, the value should be space separated class names.''
limitSelectionNumberLimit the selection of number of items from the dropdown list. Once the limit is reached, all unselected items gets disabled.none

Callback Methods

  • onSelect - Return the selected item on selection. Example : (onSelect)=“onItemSelect($event)”
  • onDeSelect - Return the un-selected item on un-selecting. Example : (onDeSelect)=“OnItemDeSelect($event)”
  • onSelectAll - Return the list of all selected items. Example : (onSelectAll)=“onSelectAll($event)”
  • onDeSelectAll - Returns an empty array. Example : (onDeSelectAll)=“onDeSelectAll($event)”

Run locally

  • Clone the repository or downlod the .zip,.tar files.
  • Run npm install
  • Run ng serve for a dev server
  • Navigate to http://localhost:4200/ The app will automatically reload if you change any of the source files.


MIT License.