Multi select dropdown in Angular 4 Example

Multi select dropdown in Angular 4 Example:

 

Step 1: Install angular2 multiselect dropdown component

npm install angular2-multiselect-dropdown

 

(or)

 

npm i –save angular2-multiselect-dropdown

 

 

Step 2: Import AngularMultiSelectModule  into @NgModule

 

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

@NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
})

 

 

Step 3: Import and use it in your 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.itemName);
console.log(" onItemSelect Total number of selected items == >"+this.selectedItems.length);
}
OnItemDeSelect(item:any){
console.log(item.itemName);
console.log("OnItemDeSelect Total number of selected items == >"+this.selectedItems.length);
}
onSelectAll(items: any){
for(let item of items){
console.log(item.itemName)
}
console.log("onSelectAll Total number of selected items == >"+this.selectedItems.length);
}

onDeSelectAll(items: any){
for(let item of items){
console.log(item.itemName)
}
console.log("onDeSelectAll Total number of selected items == >"+this.selectedItems.length);
}

}

 

Step 4: Place the template code in your template file

 


<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"
name="affiliateNetworkNameSrch" id="affiliateNetworkNameSrch"
ngControl="affiliateNetworkNameSrch"
></angular2-multiselect>

Ensure you have given name attribute to the angular2-multiselect, as angular expects name attribute for every component.

 

Github link for your reference:

Angular2 Multiselect Dropdown

 

Settings:

It provides lot of settings full details at [Click here for All Customization Options]

 

Few important required settings are: [put it as table for clear understanding].

 

Attribute / OptionsPossible valuesDesc
enableSearchFiltertrue/falseEnable filter option for the list.
enableCheckAlltrue/falseEnable the option to select all items in list
searchPlaceholderTextstringCustom text for the search placeholder text. Default value would be 'Search'
singleSelectiontrue/falseTo set the dropdown for single item selection only.
textDefault => 'Select'Text to be show in the dropdown, when no items are selected.
classesany class name ["form-control"]To style multi select dropdown as required.

 

Sample use:

singleSelection: false,
text:"Select Network Name",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"

 

 

Callback Methods Available:

  • 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)”

 

And in your template,

(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"

 

If you want some values to be selected by Default then you can assign that to selectedItems array and map it with ngModel two way databinding:

this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];

 

And the same you can map in your template file:

[(ngModel)]="selectedItems"

id is important attribute for the dropdown, if you don’t have then everything will be selected on click of any value and behaves incorrectly.

 

Sample Angular2 Multiselect Dropdown Screenshot:

 

Multi select dropdown in Angular 4 Example

 

 

 

Feel free to comment in the below comments section if you have any queries.

360 total views, 1 views today

Leave a Reply

Your email address will not be published. Required fields are marked *