Material Angular Table,Material Angular Table Selection, Part 3

Material Angular Table | Selection Part 3

Do refer materiel table part1 and part2, here discussed further.

Code Action @ StackBlitz

Selection

Get started by setting up a SelectionModel from @angular/cdk/collections that will maintain the selection state.

Step 1: Add Below Code in HTML Template

<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? SelectAllCustomers() : null" [checked]="selectedcustomers.hasValue() && isAllCustSelected()"
[indeterminate]="selectedcustomers.hasValue() && !isAllCustSelected()">
 </mat-checkbox></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
 (change)="$event ? selectedcustomers.toggle(row) : null"
  [checked]="selectedcustomers.isSelected(row)">
 </mat-checkbox></td>
</ng-container>

Both header <th> ,Cell <td> template's having  mat-checkbox , header checkbox click event handled .

Step 2: Add Below Code in Component.ts

// Import SelectionModel
import {SelectionModel} from '@angular/cdk/collections';
// create customer typed SelectionModel
selectedcustomers = new SelectionModel<customer>(true, []);
//Is all customer data selected
isAllCustSelected(): boolean {
 
const numSelected = this.selectedcustomers.selected.length;
 
const numRows = this.custSource.data.length;
 
return numSelected === numRows;
}
// SelectAllCustomers function for  header checkbox click event
SelectAllCustomers() {
 
this.isAllCustSelected() ? this.selectedcustomers.clear() :this.custSource.data.forEach(row => this.selectedcustomers.select(row));
}

Step 3: Run the Project and see the result