Estoy tratando de crear un acordeón, donde puede hacer clic en cada acordeón, pero también me gustaría tener otro botón donde un clic expanda o contraiga todos los acordeones.

Así que ahora mismo tengo este componente .ts :

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-faq', templateUrl: './faq.component.html', styleUrls: ['./faq.component.scss'], }) export class FaqComponent implements OnInit { accordion1: boolean; accordion2: boolean; accordion3: boolean; accordionAll: boolean; constructor() { } ngOnInit() { } }

Ahora, cada acordeón es solo un poco de CSS, y luego puedo activar cada uno con:

 <div class="accordion-header" (click)="accordion1 = !accordion1" [ngClass]="accordion1 ? 'is-active' : ''">Accordion 1</div>

Y luego puedo darle un poco de estilo y activar algún contenido de acordeón con ese estado particular de accordion1 .

Para expandir/contraer todo, actualmente tengo algo como esto:

 <div *ngIf="!accordionAll" (click)="accordion1 = true; accordion2 = true; accordion3 = true; accordionAll = true"></div> <div *ngIf="accordionAll" (click)="accordion1 = false; accordion2 = false; accordion3 = false; accordionAll = false"></div>

Ahora, en cierto sentido esto funciona. Pero si de repente tengo 20 acordeones diferentes, esto será horrendo. Además, no me gusta que necesito tener dos divs, ya que algún tipo de animación (por ejemplo, un icono) no funciona tan bien de esta manera.

Entonces mi pregunta es: ¿Cómo hago esto de la manera "correcta", donde no se complica con muchos acordeones, y donde realmente puedo expandir/contraer todo con un solo botón?