Progamatically Collapse All Bootstrap 4 Accordion Panels In Angular 7

Question

I am displaying a Bootstrap 4 accordion. The accordion shows/hides on a button click. I would like a function to progamatically close all panels (multiple) in the accordion when showing the accordion (since some stay open after being expanded).

Bootstrap's documentation shows how to collapse a panel using jQuery [here][1]. But I need to do the same using Angular/Typescript. I am not sure how the example code would translate to Angular 7.

$('#myCollapsible').collapse({
  toggle: false
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordionContainer">
  <div class="accordion" id="accDataAccordion">
    <div *ngFor="let item of subItems; let i = index">
      <div id="heading{{i}}" data-toggle="collapse" attr.data-target="#collapse{{i}}" aria-expanded="false" aria-controls="collapse" class="panel-title">
        <span>
          <a href="javascript:void(0);" class="btn btn-link"> {{item.item}} </a>
        </span>
        <i class="fa"></i>
      </div>
      <div id="collapse{{i}}" class="collapse" attr.aria-labelledby="heading{{i}}" data-parent="#accordionExample">
        <ul>
          <li *ngFor="let subItems of item.subItems">
            <button class="btn btn-link">{{subItems.topic}}</button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>