why ngb-bootstrap Collapse control 's toggle collapse button collapses the whole dynamically generated card set?

Question

I'm using ngb-bootstrap collapse control in my angular 9 app.

I have placed the ngb-bootstrap collapse control in a bootstrap card and as you can see the below code there will be multiple cards generated and i have linked the collapse button on the card header with the card body of that particular card so when the button is clicked only that card collapses, and not the whole card set. i have set the aria-controls attribute with the id of the ngbCollapse div as shown on the following code. But the issue i'm facing is when i click the button the whole card set gets collapsed

<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">
              <!-- <i class="fa fa-align-justify"></i> Combined All Table -->
              <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>
    <!--/.col-->
  </div>
</div>

Siti Aisah Siti Aisah · Accepted Answer · 2020-03-17T04:19:17

This is happening because isCollapse represents all card as an individual. What you need to do is change to an array of boolean to represent each card.

Example:

    this.MyQuestionGroup = [
  {
    QuestionGroupName: "GroupName1"
  },
        {
    QuestionGroupName: "GroupName2"
  },
        {
    QuestionGroupName: "GroupName3"
  }
];
for(let i=0; i<this.MyQuestionGroup.length; i++){
  this.isCollapsed.push(false);
}

then in your html:

  (click)="isCollapsed[ei] = !isCollapsed[ei]"
                            [attr.aria-expanded]="!isCollapsed[ei]" 


        <div [ngbCollapse]="isCollapsed[ei]">

        </div>

And this is working example in stackblitz collapse card

why ngb-bootstrap Collapse control 's toggle collapse button collapses the whole dynamically generated card set?

1 Answers