I am creating an accordion list with the ngbAccordion directive. But I can’t figure out how to make the [closeOthers] attribute work with *ngFor.
Setting this attribute to true is supposed to close items, when one is opened, so that only one item is open at a time. It works fine in a non-dynamic accordion.
I am suspecting it has to do with the naming of the elements. But afaik it isn’t possible to dynamically generate #myItem1, #myItem2?
<code><div ngbAccordion #myAccordion="ngbAccordion" [closeOthers]="true" *ngFor="let item of items;let idx = index">
<div ngbAccordionItem="myItem" #myItem="ngbAccordionItem" [collapsed]="true" >
... other stuff here...
</div>
</div>
</code>
<code><div ngbAccordion #myAccordion="ngbAccordion" [closeOthers]="true" *ngFor="let item of items;let idx = index">
<div ngbAccordionItem="myItem" #myItem="ngbAccordionItem" [collapsed]="true" >
... other stuff here...
</div>
</div>
</code>
<div ngbAccordion #myAccordion="ngbAccordion" [closeOthers]="true" *ngFor="let item of items;let idx = index">
<div ngbAccordionItem="myItem" #myItem="ngbAccordionItem" [collapsed]="true" >
... other stuff here...
</div>
</div>
I have a Stackblitz here with a working and non-working example.
The Stackblitz example differs a bit from the versions I use in my project, but the trouble is the same:
- Angular: 17.3
- Bootstrap: 5.3
- ng-bootstrap: 16.0
I am propably just doing it wrong, but I searched high an low.