How to use Multi Select drop down in Angular 2
Posted By : Prakhar Verma | 30-Nov-2017
1. Multi select drop can use easly in angular 2 by using built in tag.
2. Angular 2 Multi select drop down will be look like as.
3. Angular 2 Mutiselect Dropdown package is published at the npm Registry.
4. Before using multi select drop down we need to install it on npm package.
npm install angular2-multiselect-dropdown
5. Once angular2-multiselect-dropdown installed we can use in our module by import AngularMultiSelectModule from the installed package.
NgModule({
imports: [
AngularMultiSelectModule,
]
})
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
this.dropdownList = [
{"id":1,"itemName":"Pizza"},
{"id":2,"itemName":"Burger"},
{"id":3,"itemName":"Momos"},
{"id":4,"itemName":"French Frise"},
{"id":5,"itemName":"Spring Roll"},
{"id":6,"itemName":"Garlic Bread"},
{"id":7,"itemName":"Icecream"},
{"id":8,"itemName":"Maggi"},
{"id":9,"itemName":"Milk"},
{"id":10,"itemName":"Chilly Paneer"}
]
this.selectedItems = [
{"id":2,"itemName":"Burger"},
{"id":3,"itemName":"Momos"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Food Item",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
11. After configuration we implements some functions of multi select drop down such as.
onItemSelect(item:any){
console.log(item);
}
OnItemDeSelect(item:any){
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
12. Save the changes and refresh your browser and visit on page where you use multi select drop down tag.
When you click on drop down it will list out all item which are added inside dropdownList array object.
And When you click on check box item will be added in selectedItem array and also on header of multi select drop down.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Prakhar Verma
Prakhar is a Web App Developer. Experienced in Java and always gives his best effort to complete the given task. He is self motivated and fun loving person.