Skip to main content
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
Bumped by Community user
adicionou 1253 caracteres ao conteúdo
Fonte Link
Bruno
  • 13
  • 5

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

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 para desabilitar os outros?

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

adicionou 1253 caracteres ao conteúdo
Fonte Link
Bruno
  • 13
  • 5

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': CONDIÇÃOisAllSelected()}"></app-button-new>```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 para desabilitar os outros?

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:

<app-button-new [title]="titleButton" [nextRouter]="router" [ngClass]=" {'disabled': CONDIÇÃO}"></app-button-new>```

Com o seguinte CSS:

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

Qual evento eu devo chamar para desabilitar os outros?

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 para desabilitar os outros?

Destacando código
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54

Tenho uma lista com checkboxcheckbox (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:

<app-button-new [title]="titleButton" [nextRouter]="router" [ngClass]=" {'disabled': CONDIÇÃO}"></app-button-new>```

Com o seguinte CSS:

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

Qual evento eu devo chamar para desabilitar os outros?

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:

<app-button-new [title]="titleButton" [nextRouter]="router" [ngClass]=" {'disabled': CONDIÇÃO}"></app-button-new>```

Com o seguinte CSS:

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

Qual evento eu devo chamar para desabilitar os outros?

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:

<app-button-new [title]="titleButton" [nextRouter]="router" [ngClass]=" {'disabled': CONDIÇÃO}"></app-button-new>```

Com o seguinte CSS:

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

Qual evento eu devo chamar para desabilitar os outros?

Destacando código
Fonte Link
Cmte Cardeal
  • 7mil
  • 5
  • 27
  • 54
Carregando
Fonte Link
Bruno
  • 13
  • 5
Carregando