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.

• Refer material angular  basics @ Material Angular Io.
• Refer How to Start Material Angular @ InterfaceCreator.
• Refer How to Start Angular 6 step by step @ InterfaceCreator.

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() {
 console.log('call',[this.selectall,this.languages]);
   if  (this.selectall === false) {
     this.languages = new FormControl();
     return;
   }else if (this.selectall === true) {
       this.languages = new FormControl();
       this.languages.setValue(this.languagesList);
   }
}

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-form-field>
  <mat-select placeholder="Languagess" [formControl]="languages" multiple>
    <mat-option *ngFor="let language of languagesList" [value]="language">{{language}}</mat-option>
  </mat-select>
</mat-form-field>

Step 6: Run the project and See the output.

Code Action @ StackBlitz