title: How to collapse/expand only a single button in Angular 6
body: <p>I'm trying to get my code to have rows of collapsible buttons, but whenever I load into the page, all the buttons are expanded, and if I click any button, they all expand/collapse.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="accordion" *ngFor="let project of projects"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card-header" id="headingOne"&gt;
              &lt;h5 class="mb-0"&gt;
                  &lt;button class="btn btn-link" data-toggle="collapse" data-target="#projectList" aria-expanded="true" aria-controls="collapseOne"&gt;
                      {{project.projectName}}
                  &lt;/button&gt;
              &lt;/h5&gt;
          &lt;/div&gt;
  
          &lt;div id="projectList" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"&gt;
              &lt;div class="card-body"&gt;
                  {{project.projectDescription}}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What do I need to change in order to get the buttons to only expand/collapse for the button I click?</p>