How to implement select all in mat-checkbox angular 5


Here is my html template

        <h2 class="example-h2">Select Employee</h2>    
        <section class="example-section">
            <mat-checkbox  [(ngModel)]="checked">Select All</mat-checkbox>
        <section class="example-section" *ngFor="let r of emp">
            <mat-checkbox class="example-margin" [(ngModel)]="checked">{{}}</mat-checkbox>

This is code is not working properly, if I click on select all, its selecting all the check boxes, if I select on individual check box, its also selecting
all the items.

Please help.


  1. You should define a boolean property for emp list something like checked now your emp list has a property known check other than name.

  2. Change ngModel for checkboxes like below

<section class="example-section" *ngFor="let r of emp">
  <mat-checkbox class="example-margin" [(ngModel)]="r.checked">{{}}</mat-checkbox>  
  1. For check all checkboxes you should add a click function to you’r Select All checkbox like below .
<mat-checkbox  [(ngModel)]="checked" (click)="selectAll()">Select All</mat-checkbox>

And at the end add selectAll() function to you’r component i.e

  selectAll() {
    this.emp.forEach(element => {
      element.checked = true;


For unselect all checkboxes you can add a button like below

<button (click)="unSelectAll()">UnSelect all</button>

and add its function in you’r ts file like below

  unSelectAll() {
    this.emp.forEach(element => {
      element.checked = false;

Answered By – Arash

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.