CODEWITHSUNDEEP
angulartypescript
Surendra
Surendra

Reputation: 31

Dynamic accordion for lists in angular using bootstrap accordion

I have written the code for dynamic accordions it showing the design correctly but functionalies(hide/show) are not working. Below i have shared the code please help me in this problem.

HTML

<div class="form-group">
<div class="accordion ms-auto col-sm-10" id="accordionExample" *ngFor="let category of categories;let i = index">
  <div class="accordion-item">
    <h2 class="accordion-header" id="'heading'+i">
      <button class="accordion-button" [ngClass]="{ 'collapsed': i != 0 }" type="button" data-bs-toggle="collapse"
       attr.data-target="'#collapse'+i" [attr.aria-controls]="'collapse'+i" aria-expanded="true" aria-controls="collapseOne">
        {{category.title}}
      </button>
    </h2>
    <div id="'collapse'+i" class="accordion-collapse collapse show" *ngFor="let item of category.symptoms"
     data-bs-parent="#accordionExample" [ngClass]="{ 'show': i == 0 }" [attr.aria-labelledby]="'heading'+i">
      <div class="accordion-body">
         <div class="boxes" style="width:180px;height: 100px;background-color: rgb(236, 243, 253);border-radius: 10px;">
         <input type="checkbox" style="margin-left: 10px;margin-top: 10px;"> {{item.title}}
         </div>
      </div>
    </div>
  </div>
  </div>
  </div>

Upvotes: 0

Views: 1455

Answers (2)

Robert
Robert

Reputation: 1

[attr.data-target] is incorrect, should be [attr.data-bs-target]

Upvotes: 0

Shreenil Patel
Shreenil Patel

Reputation: 1094

Whenever you want to bind dynamic value to any HTML attribute, you need to use property binding. That means you need to use square brackets. for example,

<div [id]="'collapse' + i">

Where i is your variable which is defined in *ngFor loop.

In your case it would be like this.

<div class="form-group">
<div class="accordion ms-auto col-sm-10" id="accordionExample" *ngFor="let category of categories;let i = index">
  <div class="accordion-item">
    <h2 class="accordion-header" [id]="'heading'+i">
      <button class="accordion-button" [ngClass]="{ 'collapsed': i != 0 }" type="button" data-bs-toggle="collapse"
       [attr.data-target]="'#collapse'+i" [attr.aria-controls]="'collapse'+i" aria-expanded="true" aria-controls="collapseOne">
        {{category.title}}
      </button>
    </h2>
    <div [id]="'collapse'+i" class="accordion-collapse collapse show" *ngFor="let item of category.symptoms"
     data-bs-parent="#accordionExample" [ngClass]="{ 'show': i == 0 }" [attr.aria-labelledby]="'heading'+i">
      <div class="accordion-body">
         <div class="boxes" style="width:180px;height: 100px;background-color: rgb(236, 243, 253);border-radius: 10px;">
         <input type="checkbox" style="margin-left: 10px;margin-top: 10px;"> {{item.title}}
         </div>
      </div>
    </div>
  </div>
  </div>
  </div>

Upvotes: 1

Related Questions