Acordeón plegable en angular

Si te encuentras con algo que te causa duda puedes dejarlo en los comentarios y te ayudaremos tan rápido como podamos.

Solución:

Mantenga su función en ngAfterViewInit en lugar de ngOnInit. Ver stackblitz actualizado

El problema es que en ngOnInit, la vista no está completamente pintada y no obtiene todos los elementos a los que desea vincular la función.

ngAfterViewInit() 
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) 
      acc[i].addEventListener("click", function () 
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) 
          panel.style.maxHeight = null;
         else 
          panel.style.maxHeight = panel.scrollHeight + "px";
        
      );
    
  

usando angular hazlo como se muestra a continuación.

Mantenga una función de clic en el botón y vincule una propiedad isActive a la correspondiente array elemento. Luego muestre/oculte el acordeón en función de si isActive tiene valor true/false.

   item.parentName 
  

  
 child.propertyName 




toggleAccordian(event, index) 
      var element = event.target;
      element.classList.toggle("active");
      if(this.data[index].isActive) 
        this.data[index].isActive = false;
       else 
        this.data[index].isActive = true;
            
      var panel = element.nextElementSibling;
      if (panel.style.maxHeight) 
        panel.style.maxHeight = null;
       else 
        panel.style.maxHeight = panel.scrollHeight + "px";
      
  

valoraciones y reseñas

Puedes añadir valor a nuestro contenido informacional dando tu veteranía en las interpretaciones.

---

---

Utiliza Nuestro Buscador