Accordion body dynamic content not working properly - Angular + ngbAccordion

Question

I have an accordion that loops through a array and based on a condition the content inside the accordion body should load dynamically.

items = [
{
data: 'test1',
item: []
},{
data: 'test2',
item: []
},{
data: 'test3',
item: []
},
]

<div ngbAccordion *ngFor="let i of items">
  <div
    ngbAccordionItem
    #item="ngbAccordionItem"
    [collapsed]="false"
    class="item"
  >
    <div ngbAccordionHeader ngbAccordionToggle>{{ i.data }}</div>
    <div ngbAccordionCollapse>
      <div ngbAccordionBody>
        <div *ngIf="i.data === 'test1'">1</div>
        <div *ngIf="i.data === 'test2'">2</div>
        <div *ngIf="i.data === 'test3'">3</div>
      </div>
    </div>
  </div>
</div>

The problem is when the accordion body loads it always loads the first element after matching the correct condition.

This is how my result looks like:

Current Result:

________
|test2 |
________
| 2    |
| 1    |
--------

Expected Result:

________
|test2 |
________
| 2    |
--------

Can someone let me know what I am doing wrong here. I tried with ngSwitch and had the same results.

Answer 1

From the NgbAccordionBody directive API documentation and the usage, you should provide the content in the <ng-template> element.

The actual content is provided in a child ng-template element. Depending on the state of the accordion, the template will be either inserted or removed from the DOM.

<div ngbAccordionBody>
  <ng-template>
    <div *ngIf="i.data === 'test1'">1</div>
    <div *ngIf="i.data === 'test2'">2</div>
    <div *ngIf="i.data === 'test3'">3</div>
  </ng-template>
</div>

Demo @ StackBlitz