In this article, we are going to implement a simple Angular Multi Select dropdown with checkbox and option grouping using Angular 11 with example.
Table of Contents
Angular 11 Multi Select Dropdown
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.
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.
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