Material Angular Multi-Select drop down|Mat CheckBox|Select All Multi-Select drop down

Material Angular Multi-Select drop down With Select All Check Box

Material Angular drop down as multi select with select all option using mat check box.

Here we go for the steps to achieve Material multi-Select drop down with select all checkbox (Mat Checkbox).

Material Angular Modules  Used : 

  • import {MatCheckboxModule} from '@angular/material/checkbox'; refer
  • import {MatSelectModule} from '@angular/material/select';refer
  • import {MatFormFieldModule} from '@angular/material/form-field'; refer

Step 1 : Import MatCheckboxModule,MatSelectModule and MatFormFieldModule from Material Angular on app.module.ts
Step 2: in required component.ts file add variables selectall as boolean, languages as formcontrol type variable and an array of data.
  selectall: boolean;
  languages = new FormControl();
  languagesList: string[] = ['English', 'Spanish', 'Russian', 'Arabic','Mandarin Chinese','Malay','Bengali'];
Step 3: Add a function selectalllang()  required component.ts.
selectalllang() {
   if  (this.selectall === false) {
     this.languages = new FormControl();
   }else if (this.selectall === true) {
       this.languages = new FormControl();
Step 4: In Components HTML Template   Add mat-checkbox, Assing ngModel to  selectall and handle the ngModelChange event with selectalllang
<mat-checkbox [(ngModel)]="selectall" (ngModelChange)="selectalllang()" >All</mat-checkbox> 
Step 5: In Components HTML Template add  mat-select , assign formcontrol to languages and mention multiple directives to enable multi-selection
  <mat-select placeholder="Languagess" [formControl]="languages" multiple>
    <mat-option *ngFor="let language of languagesList" [value]="language">{{language}}</mat-option>
Step 6: Run the project and See the output.

Code Action @ StackBlitz

Post a Comment