Tenho uma lista com `checkbox` (dentro de uma tabela) e preciso desabilitar todos os componentes da tela quando um `checkbox` é marcado. 

Estou tentando utilizar o `ngClass` com `disabled`, da seguinte forma:
```html
<div class="content-header-table">
    <div class="content-filter">
      <mat-form-field appearance="outline" class="field-filter" [ngClass]="{'disabled': isAllSelected()}">
        <mat-label>{{ 'data-table-component.search' | translate }}</mat-label>
        <input matInput #search (keyup)="applyFilter(search.value)" placeholder="{{'data-table-component.search' | translate}}">
      </mat-form-field>
      <button mat-raised-button color="primary" class="button-filter" [ngClass]="{'disabled': isAllSelected()}">
        <mat-icon>search</mat-icon>
      </button>
    </div>

    <div class="content-button-actions">
      <button mat-stroked-button color="warn" class="remove-items" *ngIf="items.length >= 1" @showButton
        (click)="removeElements()">
        <mat-icon>delete</mat-icon>
        {{ 'data-table-component.removeItems' | translate }}
      </button>
      <app-button-new [title]="titleButton" [nextRouter]="router" [ngClass]="{'disabled': isAllSelected()}"></app-button-new>
    </div>
  </div>```
```
Com o seguinte CSS:
```css
.disabled{
  pointer-events: none;
  opacity: 0.5;
}
```
TS
```
isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    console.log(this.selection.hasValue());
    if (this.selection.hasValue() === true) {
      this.items = this.dataSource.data;
    }
    return numSelected === numRows;
  }

```


Qual evento eu devo chamar para desabilitar os outros?