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;
}
Qual evento eu devo chamar paraTeria uma maneira de desabilitar os outros?demais componentes clicando apenas na row, hoje só consigo desabilitar os demais componentes