How to implement Angular Multiselect Dropdown

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.

1. To let user input multiple warehouse locations for his/her business for a inventory management system
2. To let a hotelier input multiple amenities available in his/her hotel for a hotel management system
3. 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
  • Installation
  • Including the multi-select dropdown package in your module
• How to use Angular Multi-select Dropdown
  • Component.ts
  • Component.html

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.

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)