Material Angular Table Column Header With Multi Selection,Material Angular Table Column Selection,Mat-Table

Material Angular Table Column Header With Multi-Selection|

Material Angular Table Header Column Check Box 

Sometimes we need multi-selection in a single click & here we discussed.

Knowledge required 

• MatCheckboxModule-mat-checkbox,MaterialCheckBox Module 
• MatTableModule- mat-table,MatTable Module 
• TwoWayBinding 
• Typescript array 

Step 1: Modules to import 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatTableModule} from '@angular/material/table';

import {MatCheckboxModule} from '@angular/material/checkbox';

Step 2: Have to define a class  type for two way binding with mattable

export interface people {
  name: string;
  Sno: number;
  canspeak: boolean;
  canwrite: boolean;
}

Step 3 : Create an array for the people type 

const ELEMENT_DATA: people[] = [
  {Sno: 1, name: 'John', canspeak: false, canwrite: false},
  {Sno: 2, name: 'Miller', canspeak: false, canwrite: false},
  {Sno: 3, name: 'Peter', canspeak: false, canwrite: false},
  {Sno: 4, name: 'Smith', canspeak: false, canwrite: false},
  {Sno: 5, name: 'Warner', canspeak: false, canwrite:false},
  {Sno: 6, name: 'Shane', canspeak: false, canwrite:false},
  {Sno: 7, name: 'Mr.G', canspeak: false, canwrite: false},
  {Sno: 8, name: 'Ryan', canspeak: false, canwrite: false},
  {Sno: 9, name: 'Rocky', canspeak: false, canwrite: false},
  {Sno: 10, name: 'Sham', canspeak: false, canwrite: false},
];

Step 4 : Assign Array elements to MatTable DataSource

dataSource = new MatTableDataSource<people>(ELEMENT_DATA);

Step5: Add below functions for canspeak selection 

isAllspeakSelected(): boolean {
    const numRows = this.dataSource.data.length;
    let selectedcount : number ;
    selectedcount= 0 ;
    this.dataSource.data.forEach(ele => {
      if (ele.canspeak === true) {
          selectedcount+=1;
      }
    });
    if (numRows === selectedcount) {
      return true
    }
    return false;
  }

   SelectAllspeak(event: MatCheckboxChange ) {
     this.dataSource.data.forEach(ele => {
      ele.canspeak =event.checked;
    });
  }

  

Step6: Add below functions for canwrite selection 

isAllwriteSelected(): boolean {
    const numRows = this.dataSource.data.length;
    let selectedcount : number ;
    selectedcount= 0 ;
    this.dataSource.data.forEach(ele => {
      if (ele.canwrite === true) {
          selectedcount+=1;
      }
    });
    if (numRows === selectedcount) {
   
      return true
    }
 
    return false;
  }
   SelectAllwrite(event: MatCheckboxChange ) {
     this.dataSource.data.forEach(ele => {
      ele.canwrite =event.checked;
    });
  }

  

  Step 7: Header and data of canspeak in mat table will be
  

  <ng-container matColumnDef="canspeak">
     <th mat-header-cell *matHeaderCellDef>
      <mat-checkbox (click)="$event.stopPropagation()" (change)="SelectAllspeak($event)"
                    [checked]="isAllspeakSelected()"
                    [indeterminate]="!isAllspeakSelected()">
      Speak?</mat-checkbox>
    </th>
<td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation()"  [value]="row.canspeak" [(ngModel)]="row.canspeak" >
      </mat-checkbox>
    </td>
  </ng-container>

Step 8: Header and data of canwrite in mat table will be

  <ng-container matColumnDef="canwrite">
    <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (click)="$event.stopPropagation()" (change)="SelectAllwrite($event)"
                    [checked]="isAllwriteSelected()"
                    [indeterminate]="!isAllwriteSelected()">
      Write?</mat-checkbox>
       </th>
<td mat-cell *matCellDef="let row">
      <mat-checkbox (click)="$event.stopPropagation();"[checked]="row.canwrite"  [(ngModel)]="row.canwrite"   >
      </mat-checkbox>
    </td>
</ng-container>

And run your angular project using ng serve, your output will be 

Code Action @StackBlitz