I am currently implementing the ngb-bootstrap collapse feature in my Angular 9 application.
Incorporating the ngb-bootstrap collapse functionality within a Bootstrap card, I have multiple cards being generated. Each card is equipped with a collapse button in the header section that is linked to the corresponding body of that specific card. This design ensures that only the targeted card collapses upon button click, preventing the entire set of cards from collapsing simultaneously. Despite correctly setting the aria-controls attribute with the id of the ngbCollapse div as illustrated in the code snippet below, I encounter an issue where clicking the button results in collapse of the entire card set.
<div class="animated fadeIn" style="margin-left: 2%; margin-right: 2%; margin-top: 2%;" id="qgroup-div-g{{ei}}" *ngFor="let g of this.s?.MyQuestionGroup; let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position: absolute; right: 10px; top: 5px;"
(click)="isCollapsed = !isCollapsed"
[attr.aria-expanded]="!isCollapsed"
attr.aria-controls="qgroup-collapse-wrapper-g{{ei}}">
<i class="fa fa-align-justify"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body">
<div class="table-responsive">
sample text 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>