title: Collapsible accordion in angular
body: <p>I am making accordion to make a collapsible div using javascript in angular application..</p>
  
  <p>For which if its not getting open on click over the button on <code>Parent One</code> or any other parent name..</p>
  
  <p><strong>Html</strong>:</p>
  
  <pre><code>&lt;div *ngFor="let item of data"&gt;
    &lt;button class="accordion"&gt; {{item.parentName}} &lt;/button&gt;
    &lt;div class="panel" *ngFor="let child of item.childProperties"&gt;
    &lt;p&gt; {{child.propertyName}} &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Ts</strong>:</p>
  
  <pre><code>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 &lt; 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";
          }
        });
      }
    }
  
  }
  </code></pre>
  
  <p><strong>Note:</strong> As i am new in angular i am making it with javascript way.. So kindly help me to achieve the result using <strong>pure angular and typescript</strong>..</p>
  
  <p>Working <strong>stackblitz</strong> <a href="https://stackblitz.com/edit/angular-lp3riw" rel="noreferrer">https://stackblitz.com/edit/angular-lp3riw</a></p>
  
  <p>You can see in demo that the parent button are visible but if you click over the button its not getting expanded..</p>
  
  <p>Also listed down working collapsible button below with static values..</p>
  
  <p>How to make a collapsible accordion as like given stackblitz static values using angular and typescript way (Without any third party or jquery)..</p>