Disable Components with Angular

Question

I have a list with checkbox (inside a table) and need to disable all screen components when a checkbox is marked.

I’m trying to use the ngClass with disabled, as follows:

<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>```

With the following 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;
  }

There would be a way to disable the other components by just clicking on Row, today I can only disable the other components

Answer 1

If you have form components inside your table I believe that the best way is to use a formGroup and disable the entire form. If it contains only buttons to disable, you can use the property via [disabled] = true. If none of these solutions solve your problem I suggest sharing more information such as source code so that I and others can help you.