0

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

3
  • Seria o ` [ngChecked]="false"`? Commented 30/11/2020 às 19:47
  • Mas como ocorreria a chamada da classe CSS? Creio que seja com NgClass mesmo.
    – Bruno
    Commented 30/11/2020 às 19:58
  • já tentou [disabled]="variavelBooleana" ou [attr.disabled]="variavelBooleana" ou [attr.disabled]=" disabled ? 'disabled' : null " ? Commented 27/12/2022 às 19:31

1 Resposta 1

0

Se você possui componentes de formulário dentro de sua tabela acredito que a melhor forma é usar um formGroup e desabilitar todo o formulário. Caso conter apenas botões para desabilitar pode-se utilizar a propriedade via [disabled] = true. Caso nenhuma destas soluções resolva seu problema sugiro compartilhar mais informações como por exemplo o código fonte para que eu e outras pessoas possam te ajudar.

2
  • Melhorei o exemplo do código.
    – Bruno
    Commented 8/12/2020 às 1:24
  • Tenta assim: <button mat-raised-button color="primary" class="button-filter" [disabled]="isAllSelected()"> <mat-icon>search</mat-icon> </button> Commented 9/12/2020 às 14:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .