Ng-bootstrap: Accordion - Generate dynamically with ngFor

Created on 22 Mar 2018  Â·  1Comment  Â·  Source: ng-bootstrap/ng-bootstrap

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

accordion tab bug

Most helpful comment

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.

>All comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

kesemdavid picture kesemdavid  Â·  3Comments

tmeneau picture tmeneau  Â·  3Comments

rolandoldengarm picture rolandoldengarm  Â·  3Comments

mahmoudajawad picture mahmoudajawad  Â·  3Comments

Palacios95 picture Palacios95  Â·  3Comments