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


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()">
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
 (change)="$event ? selectedcustomers.toggle(row) : null"
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 =;
return numSelected === numRows;
// SelectAllCustomers function for  header checkbox click event
SelectAllCustomers() {
this.isAllCustSelected() ? this.selectedcustomers.clear() =>;

Step 3: Run the Project and see the result

No comments

Post Top Ad

Post Bottom Ad