title: How to use ngFor for an accordion to loop multiple times in Angular
body: <p>I have the below code for creating accordion using plus and minus icons. I have handled the toggle functionality as well. But now I want to loop this inside ngFor for multiple set of elements . I am not sure how to do this.
  Basically i have a resultArray which is a json . I need to loop through resultArray json to get the heading and description and place it as accordion heading and accordion description. I am not sure how to replace the accord.id dynamically.</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div *ngFor = "let resulArray of resultArray"&gt;
       &lt;div *ngFor="let accord of accordian;"&gt;
                    &lt;div (click)="toggle(accord.id)" id="accordionTitle{{accord.id}}" class="accordionTitle active"&gt;{{accord.label}}
                      &lt;i class="fa fa-minus" id="minus{{accord.id}}"&gt;&lt;/i&gt;
                    &lt;/div&gt;
                    &lt;div id="{{accord.id}}" *ngIf="accord.id == 0" class="hidden-data show"&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The toggle below is to apply styles and change of icons from plus to minus to the accordion. When toggle function is called</p>
  
  <h2>ts.</h2>
  
  <pre><code>this.accordian = [{
        id: 0, label: 'Accordion title'
      }];
  
  toggle(id) {
      this.x = document.getElementById(id);
      this.y = document.getElementById('accordionTitle' + id);
      if (this.x.className.indexOf('show') === -1) {
        this.x.className += ' show';
        this.y.className += ' active';
        document.getElementById('minus' + id).classList.remove('fa-plus');
        document.getElementById('minus' + id).classList.add('fa-minus');
      } else {
        /*  this.x.className = this.x.className.replace('hide', ''); */
        this.x.className = ' hide';
        /*   this.y.className = this.y.className.replace('', ''); */
        this.y.className = 'accordionTitle';
        document.getElementById('minus' + id).classList.remove('fa-minus');
        document.getElementById('minus' + id).classList.add('fa-plus');
      }
  }
  </code></pre>
  
  <h2>JSON</h2>
  
  <pre><code>resultArray = {
        'status': 'SUCCESS',
        'responseCode': '000',
        'errorMessage': null,
        'cboRequestList': [
            {
                'seqNo': 1,
                'applicableFor': '0',
                'applicableForText': 'Hide',
                'displayDesc': null,
                'displaySeqNo': 1,
                'description': 'ABCDisplayDesc1',
                'type': 'W',
                'content': null,
                'field1': null,
                'field2': null,
                'field3': null,
                'field4': null,
                'markerId': null,
                'markerLastModifiedTime': null,
                'countryCode': null,
                'languageCode': null,
                'commentMaker': null
            },
            {
              'seqNo': 2,
              'applicableFor': '0',
              'applicableForText': 'Hide',
              'displayDesc': null,
              'displaySeqNo': 1,
              'description': 'ABCDisplayDesc1',
              'type': 'W',
              'content': null,
              'field1': null,
              'field2': null,
              'field3': null,
              'field4': null,
              'markerId': null,
              'markerLastModifiedTime': null,
              'countryCode': null,
              'languageCode': null,
              'commentMaker': null
          }
        ],
  }
  </code></pre>