title: Dynamically created Bootstrap collapse in Angular 6 not working
body: <p>In Angular 6 I iterate through a data set in order to dynamically create an accordion/collapse.  The issue is that Bootstrap is initialized at page load, however, this accordion is created after page load, after an API call.  So after the accordion is rendered, its is not interactive, as the new DOM elements were not picked by the initilization of bootstrap at page load.</p>
  <p>If I could just get bootstrap to re-initialize from the JS entirely, that would be perfect.</p>
  <p>Otherwise I need to find a way to re-initialize Bootstrap collapse so that it picks up all of the new DOM additions that are created.  Here is the markup.  Ive tried $('.collapse').collapse() like the docs say but that only collapses the content, it does not initialize the controls to toggle the content.</p>
  <pre><code>&lt;div id=&quot;accordion&quot; *ngIf=&quot;data &amp;&amp; data.length &gt; 0&quot;&gt;
    &lt;!-- Chart --&gt;
    &lt;div class=&quot;card&quot; *ngFor=&quot;let chart of data; let chartIndex = index&quot;&gt;
      &lt;div class=&quot;card-header&quot; id=&quot;heading{{chartIndex}}&quot;&gt;
        &lt;h4 class=&quot;mb-0&quot;&gt;
          &lt;a href=&quot;#&quot; 
             class=&quot;acc-btn&quot; 
             data-toggle=&quot;collapse&quot; 
             data-target=&quot;#collapse{{chartIndex}}&quot; 
             aria-expanded=&quot;true&quot;&gt;
            &lt;span class=&quot;fa fa-chevron-up&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;
            {{chart.sectionName}}
        &lt;/a&gt;
        &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id=&quot;collapse{{chartIndex}}&quot; class=&quot;collapse show&quot; data-parent=&quot;#accordion&quot;&gt;
        &lt;div class=&quot;card-body&quot;&gt;
          &lt;table class=&quot;scenario&quot;&gt;
            &lt;tr&gt;
              &lt;th *ngFor=&quot;let header of chart.headers&quot;&gt;{{header}}&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr *ngFor=&quot;let row of chart.data&quot;&gt;
              &lt;td *ngFor=&quot;let value of row&quot;&gt;&lt;app-parent-child-data-list [data]=&quot;value&quot;&gt;&lt;/app-parent-child-data-list&gt;&lt;/td&gt;
            &lt;/tr&gt;                       
          &lt;/table&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>