web-dev-qa-db-fra.com

Accordéon pliable en angular

Je fais de l'accordéon pour faire un div pliable en utilisant javascript dans angular ..

Pour lequel, s'il ne s'ouvre pas, cliquez sur le bouton Parent One ou tout autre nom de parent ..

Html :

<div *ngFor="let item of data">
  <button class="accordion"> {{item.parentName}} </button>
  <div class="panel" *ngFor="let child of item.childProperties">
  <p> {{child.propertyName}} </p>
</div>
</div>

Ts :

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  data: any =
    [
      {
        "parentName": "Parent One",
        "childProperties":
          [
            { "propertyName": "Property One" },
            { "propertyName": "Property Two" }
          ]
      },
      {
        "parentName": "Parent Two",
        "childProperties":
          [
            { "propertyName": "Property Three" },
            { "propertyName": "Property Four" },
            { "propertyName": "Property Five" },
          ]
      },
      {
        "parentName": "Parent Three",
        "childProperties":
          [
            { "propertyName": "Property Six" },
            { "propertyName": "Property Seven" },
            { "propertyName": "Property Eight" },
          ]
      }
    ]

  ngOnInit() {
    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";
        }
      });
    }
  }

}

Remarque: Comme je suis nouveau dans angular je le fais avec la manière javascript .. Alors, aidez-moi à atteindre le résultat en utilisant pure angular et TypeScript ..

Travail stackblitz https://stackblitz.com/edit/angular-lp3riw

Vous pouvez voir dans la démo que le bouton parent est visible mais si vous cliquez dessus, il ne s'agrandit pas.

Également répertorié ci-dessous le bouton pliable de travail ci-dessous avec des valeurs statiques.

Comment faire un accordéon pliable comme des valeurs statiques de stackblitz données en utilisant angular et la manière TypeScript (sans tierce partie ni jquery) ..

javascripthtmlangulartypescriptaccordion
5
Maniraj Murugan

Gardez votre fonction dans ngAfterViewInit au lieu de ngOnInit. Voir mise à jour stackblitz

Le problème est que sur ngOnInit la vue n'est pas complètement peinte et que vous n'obtenez pas tous les éléments sur lesquels vous souhaitez lier la fonction.

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";
        }
      });
    }
  }

En utilisant angulaire faites-le comme indiqué ci-dessous.

Gardez une fonction de clic sur le bouton et liez une propriété isActive à l'élément de tableau correspondant. Ensuite, affichez/masquez l'accordéon en fonction de si isActive a la valeur true/false.

<div *ngFor="let item of data;let i = index;">
  <button class="accordion" (click)="toggleAccordian($event, i)"> {{item.parentName}} </button>
  <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive">
  <p> {{child.propertyName}} </p>
</div>
</div>


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";
      }
  }
3
Nandita Sharma