Angular 11 Multi Select Dropdown and Option Groups

In this article, we are going to implement a simple Angular Multi Select dropdown with checkbox and option grouping using Angular 11 with example.

The Angular 11 multi select dropdown selections can be done using the using Angular Material mat-select component. This component allows the user to select multiple options from a list of options.

in the example, below we are creating a method “getDepartments” that fetches the data from REST API and displays it in UI.

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { IDepartment } from './models/IDepartment'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  departments$: Observable<IDepartment[]>; 

  constructor(private _http: HttpClient) {    
  }
  ngOnInit() {
    this.getDepartments();
  }
  getDepartments() {
    this.departments$ = this._http.get<IDepartment[]>("/assets/data/department.json");
  } 
} 
export interface IDepartment {
    name: string;
    id: string;
} 

Next, we will update our component template file to display departments dropdown and we need to add multiple attribute in the mat-select component. we are using the app.component.html file for updating as below:

<mat-form-field appearance="fill" class="select-element ">
    <mat-label>Departments</mat-label>
    <mat-select multiple>
      <mat-option *ngFor="let department of departments$ | async; index as i" [value]="department.id">
        {{department.name}}</mat-option>
    </mat-select>
  </mat-form-field> 

Build and run the application, the output can be seen as shown below.

multi select dropdown

Angular Material Select Dropdown Option Group

To create Angular Material select dropdown option group we will use Angular Material mat-select and mat-optgroup components which have some default property that helps to display grouping.

 In the below code snippets we are fetching Designations data from REST API and displaying option grouping.

 designations$: Observable<IDesignation[]>;
 
 ngOnInit() {
    this.getDesignations();
  }
   getDesignations() {
    this.designations$ = this._http.get<IDesignation[]>("/assets/data/designation.json");
  } 
export interface IDesignation {
    disabled: boolean,
    department: string,
    designations: IDepartment[]
} 

We will use both component mat-select and mat-optgroup for option grouping as we can see in the example below.

 <mat-form-field appearance="fill" class="select-element ">
    <mat-label>Designations</mat-label>
    <mat-select> 
      <mat-optgroup *ngFor="let group  of designations$ | async; index as i" [label]="group.department"
        [disabled]="group.disabled">
        <mat-option *ngFor="let designation of group.designations" [value]="designation.name">
          {{designation.name}}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field> 

Build and run the application, the output can be seen as shown below.

select dropdown option group

Source code available for download

The source code is available on Angular 11 Multi Select Dropdown and Option Groups.

URL:https://github.com/decodedscript/angular-multi-select-dropdown-and-option-groups

Scroll to Top