In this post, I am going to share how to implement multi-select dropdown in Angular 2+ projects. Implementing a multi-select dropdown is necessary when you want to store multiple values related to an entity in any system implementation.
Let us consider an example to understand the use cases of the multi-select dropdown.
- To let user input multiple warehouse locations for his/her business for a inventory management system
- To let a hotelier input multiple amenities available in his/her hotel for a hotel management system
- To let a job-seeker select all his/her interests in a job portal
These are some of the examples where there is a requirement for implementing multi-select dropdowns in your user interfaces.
In this post, I am going to share how to implement such use cases in Angular using the multi-select dropdown.
I have tested the following package with Angular 9, Angular 10, and Angular 11. So it should be working with the latest version of Angular you are using for your project.
For releases and updates, refer to their git repository.
Table of Contents
- Creating a new Angular Application
- Angular Multiselect Dropdown: Installing and importing node module
- How to use Angular Multi-select Dropdown
Creating a new Angular Application
The creation of your first Angular project has become very simple because of the handy Angular CLI. Open your CMD and run the following command.
ng new bhutanioÂ
Code language: JavaScript (javascript)
The above command will create a folder bhutanio
and copy all the required dependencies and configuration settings.
![Angular Project Structure](https://i0.wp.com/bhutanio.com/wp-content/uploads/2022/02/project-structure.png?resize=840%2C449&ssl=1)
Find out more about creating a new project here: How to Create a new project in Angular
Angular Multiselect Dropdown: Installing and importing node module
ng-multiselect-dropdown
package is an Angular multi-select dropdown component for web applications. It is easy to integrate and use the package. It can be bound to any custom data source.
Installation
Like installing any other npm package in your Angular projects use the npm cmd to install ng-multiselect-dropdown
npm install ng-multiselect-dropdown
Including the multi-select dropdown package in your module
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
// ...
@NgModule({
imports: [
NgMultiSelectDropDownModule.forRoot()
// ...
]
// ...
})
export class AppModule {}
Code language: JavaScript (javascript)
How to use Angular Multi-select Dropdown
Component.ts
import { Component, OnInit } from '@angular/core';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
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:IDropdownSettings = {
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);
}
}
Code language: JavaScript (javascript)
Component.html
<ng-multiselect-dropdown
[placeholder]="'custom placeholder'"
[settings]="dropdownSettings"
[data]="dropdownList"
[(ngModel)]="selectedItems"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
</ng-multiselect-dropdown>
Code language: HTML, XML (xml)