Accordion – Generate dynamically with ngFor

Hello,

I have a Laptop object that contains children. And these children also have children.

So I have a first *ngFor that loop on the first children.
And a second * ngFor (in the first *ngFor) that loops on the children of the parent child.

Bug description:

When the page loads, in some click actions, the parent Accordion has the title of the first child Accordion.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/zUlok52LhTDWthcMrChp?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.5
ng-bootstrap: 1.0.2

I do not know if I did something bad or if it’s a bug.

NB:

If I replace:

<ngb-accordion activeIds="static-0">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion activeIds="static2-0">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index"  [disabled]="true" id="static2-{{index2}}"   >
                <ng-template ngbPanelTitle>
                    <span>&#9733; <b>[{{children2.id}}]</b> {{children2.name}} &#9733;
                      <div style="float:right; border: solid 0.3em; border-color: gold;">+{{children2.price}€</div>
                    </span>
                </ng-template>
            </ngb-panel>
          </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

by:

<ngb-accordion activeIds="static-0">
  <ngb-panel  *ngFor=" let children of laptop.children; let index = index" id="static-{{index}}" title="[{{children.id}}] - {{children.name}}">
    <ng-template ngbPanelContent>
        <ngb-accordion activeIds="static2-0">
            <ngb-panel  *ngFor=" let children2 of children.children; let index2 = index"  [disabled]="true" id="static2-{{index2}}"  title="[{{children2.id}}] - {{children2.name}}" >
            </ngb-panel>
        </ngb-accordion>
    </ng-template>
  </ngb-panel>
</ngb-accordion>

the bug does not appear.

thank you for helping me

1 possible answer(s) on “Accordion – Generate dynamically with ngFor

  1. Thnx for reporting, I believe that this is a bug on our side that should be relatively easy to fix. Scheduling it for the next bug-fix release.