Nuevo en Angular, por lo que parece que no puedo hacer que funcione, pero tengo una lista de elementos que tiene la opción de que si alguien hace clic en el elemento, muestra alterna entre mostrar/ocultar (alternar una clase). Mi código funciona, pero alternará TODOS los elementos a la vez en lugar del que se ha hecho clic. Busqué algunos ejemplos en línea pero encontré casi lo mismo.
// class public toggleClass = false; public onToggleDiv(): void { this.toggleClass = !this.toggleClass; } // component <div class="group" (click)="onToggleDiv()" [ngClass]="{'active' : toggleClass}" > Some content </div> <div class="group" (click)="onToggleDiv()" [ngClass]="{'active' : toggleClass}" > Some content </div> ... and more divsSolución por ahora (lamentablemente solo se puede abrir 1 caja)
// class public toggleRow: boolean | number = false; public onToggleDiv(): void { this.toggleRow = this.toggleRow === id ? false : id; } // component <div class="group" (click)="onToggleDiv(1)" [class.active]="toggleClass === 1" > Some content </div> <div class="group" (click)="onToggleDiv(2)" [class.active]="toggleClass === 2" > Some content </div> ... and more divsDebe trabajar con una matriz de números para definir qué elemento debe tener la clase o no. Supuse que estabas en un bucle o que tenías algún tipo de identificador para tu div. Aquí hay un ejemplo en Stackblitz sobre cómo puedes hacer algo similar y aquí está el código:
t:
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { name = 'Angular'; items = Array.from(Array(10).keys()); toggledItems: number[] = []; toggleItem = (i: number) => { if (this.toggledItems.includes(i)) { this.toggledItems = this.toggledItems.filter((x) => x !== i); } else { this.toggledItems.push(i); } }; }html:
<div *ngFor="let item of items; let i = index"> <div [ngClass]="{ hidden: toggledItems.includes(i) }"> Element <button type="button" (click)="toggleItem(i)">Hide me</button> </div> </div>> </div>CSS:
.hidden { opacity: 0.3 }En tu componente
// class public toggleClass = false; public currentActive = 0; public onToggleDiv(id): void { this.toggleClass = !this.toggleClass; currentActive = this.toggleClass ? id : 0; }En tu plantilla:
// component <div class="group" (click)="onToggleDiv(1)" [class.active]="currentActive == 1"> Some content </div> <div class="group" (click)="onToggleDiv(2)" [class.active]="currentActive == 2"> Some content </div>Referencias: