Skip to main content
5 de 5
adicionou 1253 caracteres ao conteúdo
Bruno
  • 13
  • 5

Desabilitar componentes com Angular

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:

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

.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;
  }

Teria uma maneira de desabilitar os demais componentes clicando apenas na row, hoje só consigo desabilitar os demais componentes

Bruno
  • 13
  • 5