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

 

[html]
import { AngularMultiSelectModule } from ‘angular2-multiselect-dropdown/angular2-multiselect-dropdown’;

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

[/html]

 

 

Step 3: Import and use it in your Component

 

[html]
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);
}

}
[/html]

 

Step 4: Place the template code in your template file

 

[html]

<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>
[/html]

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].

 

[table id=angular-multiselect /]

 

Sample use:

[plain]
singleSelection: false,
text:”Select Network Name”,
selectAllText:’Select All’,
unSelectAllText:’UnSelect All’,
enableSearchFilter: true,
classes:”myclass custom-class”
[/plain]

 

 

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,

[html]
(onSelect)=”onItemSelect($event)”
(onDeSelect)=”OnItemDeSelect($event)”
(onSelectAll)=”onSelectAll($event)”
(onDeSelectAll)=”onDeSelectAll($event)”
[/html]

 

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:

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

 

And the same you can map in your template file:

[html]
[(ngModel)]=”selectedItems”
[/html]

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:

 

 

 

 

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