Multi Select Dropdown In Angular 14

In this article, we will see how to implement a multi-select dropdown in Angular14 applications. 

Creating an Angular Application

Now let’s create an Angular application

ng new Angular14App        

1. JavaScript

Copy

Now open the application in VS code and go to the package.json file, you will see the latest CLI and other install packages

Now open the terminal and Run the created Application using the below command

ng serve -o

and you will be navigated to http://localhost:4200/ URL and will see the below screen

Installing dropdown package

For using the multi-select dropdown, we have to use a package ng-multiselect-dropdown.

npm i ng-multiselect-dropdown

After installing the package now we have to add this module to our app. module file. 

Add NgMultiSelectDropDownModule.forRoot() in your import array of app module file.

Implement Multi-select dropdown

Go to the app.component.ts file and Create a local array of the items which we will show in the dropdown. 

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
    };
    
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
}

JavaScript

1. JavaScript

Cop

Below is the app.component.ts file

<div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
       formControlName="myItems">
    </ng-multiselect-dropdown>
  </form>
</div>

Markup

Now run your application and you will see output like below

Select default items on page load

When we run the application and want to load some dropdown values then we need to change app.component.ts file like below

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
    };

    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
}

JavaScript

1. JavaScript

Cop

Now when you will run the application, you will see below the output.

Change the text of select all/ unselect all checkbox

If we want to change the text value of select all and unselectall then we need to change the dropdown setting like below

  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }

JavaScript

Output

Show hide select all options in the dropdown

If we want to hide or show the select all option then we need to change the dropdown setting like below

  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',
      enableCheckAll: false,
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }

JavaScript

Output

Add place holder

Whenever we see a dropdown, then we can add the placeholder to that, so let's change the dropdown setting like below

placeholder changes will be in app.component.html file

component file as shown in the below code.

<div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
       [placeholder]="'Select the Data'"
       formControlName="myItems">
    </ng-multiselect-dropdown>
  </form>
</div>

Markup

Output

Add search filter

Ng-multi select-dropdown by default gave a search filter for enabling this search filter you have to add a new setting in your settings array. 

ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',     
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }

JavaScript

Output

No Data Placeholder

For some reason when you call dynamic data from API and you get nothing to show then you have to tell the user that there is no data or something like that. 

    ngOnInit() {
   
    this.settings = {
      idField: 'ID',
      textField: 'Value',     
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true,
      noDataAvailablePlaceholderText: "Nothing to show data"
    };
   
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }

JavaScript

Output

Callback Methods

• onSelect - Return the selected item when an item is checked. Example : (onSelect)="onDataSelect($event)"
• onSelectAll - Return the all items. Example : (onSelectAll)="onSelectAll($event)".
• onUnSelect - Return the unselected item when an item is unchecked. Example : (onUnSelect)="onDataUnSelect($event)"
• onFilterChange - Return the key press. Example : (onFilterChange)="onFilterChange($event)"
• onDropDownClose- Example : (onDropDownClose)="onDropDownClose()"

Here are some examples of callback methods.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dropdownData : any[] = [];  
  settings:IDropdownSettings={};
  form!:FormGroup;
  selectedItems: any[] = [] ;
  
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.dropdownData = [
      { ID: 1, Value: 'Data1' },
      { ID: 2, Value: 'Data2' },
      { ID: 3, Value: 'Data3' },
      { ID: 4, Value: 'Data4' },
      { ID: 5, Value: 'Data5' }
    ];
    this.settings = {
      idField: 'ID',
      textField: 'Value',     
      selectAllText: "Select All Data",
      unSelectAllText: "UnSelect All Data",
      allowSearchFilter: true,
      noDataAvailablePlaceholderText: "Nothing to show data"
    };
    this.selectedItems = [
      { ID: 3, Value: 'Data4'  },
      { ID: 4,Value: 'Data5' }
    ];
    this.form = this.fb.group({
      myItems: [this.selectedItems]
  });
  }
  onDataSelect(item: any) {
    console.log('onData Select', item);
  }
  onDataUnSelect(item: any) {
    console.log('onData UnSelect', item);
  }
  onSelectAll(items: any) {
    console.log('onSelect All', items);
  }
  onUnSelectAll() {
    console.log('onUnSelect All fires');
  }
}

JavaScript

<div style="width:50%">
  <form [formGroup]="form">
    <ng-multiselect-dropdown
       [settings]="settings"
       [data]="dropdownData"
   
       formControlName="myItems"
       (onSelect)="onDataSelect($event)"
       (onSelectAll)="onSelectAll($event)"
       (onDeSelect)="onDataUnSelect($event)"
       (onDeSelectAll)="onUnSelectAll()">
    </ng-multiselect-dropdown>
  </form>
</div>

Markup

Output

In the above image, we can see, that we performed a couple of callback operations and the same are logged in the console.

---------------------------------------------------