Header checkbox is not checked when all child checkboxes are selected in angular material

I have added checkboxs to my material table. Everything is working fine apart from when I select all the child checkboxes manually the header checkbox is not checked.

HTML code:

<ng-container matColumnDef="select">
            <mat-header-cell *matHeaderCellDef>
              <label class="Ai-checkbox">
                        <input class="inputCheckBox" type="checkbox" name="checkBox" value="all" (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                      </label>
            </mat-header-cell>

            <mat-cell *matCellDef="let row">
              <label class="Ai-checkbox">
                <input class="inputCheckBox" type="checkbox" name="checkBox" value="all" (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
              </label>
            </mat-cell>
          </ng-container>

TS File:

 /** Whether the number of selected elements matches the total number of rows. */
 isAllSelected(){
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

What am I doing wrong ?