multiple Accordion's build with ngFor ['Element': '#3.1' is not a valid selector.]

Bug description:

• in template(html) I want multiple accordions buld with for lop, how to define them in typescript
• in typescript I want for specific accordion to toggel specific panel

is this even possible?

• HTML:

<div class="panel-group"
         *ngFor="let fqa of faqs, let i = index">

        <h5 [id]="fqa.id">{{fqa.section}}</h5>

        <ngb-accordion #acc="ngbAccordion"
                       [id]="fqa.id">
            <ngb-panel *ngFor="let q of fqa.qa"
            [id]="q.id"
                       title="V: {{q.question}}">

                <ng-template ngbPanelContent>
                    <span class="badge badge-primary">O:</span>&nbsp;
                    <span style="text-align: justify"
                          [innerHtml]="q.answer"></span>
                </ng-template>
            </ngb-panel>
        </ngb-accordion>
</div>

• typescript:

@ViewChildren('acc')
  accordions: QueryList<NgbAccordion>;

• error:

Failed to execute 'querySelector' on 'Element': '#1.1' is not a valid selector.
    at NgbAccordion._getPanelElement (http://localhost:4200/vendor.js:1874:44)

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 13

ng-bootstrap: 10.0.0

Bootstrap: 4.6.0

[sysmat]

• sorry it was my mistake, I query the wrong accordion, and then there was no panel with the desired id, it works
• the only suggestion is when using toggle I get infinite times x msg in logs and reopening panel

[ExFlo]

Hi First you shouldn’t use the id at two points here <h5 [id]=“fqa.id”> and <ngb-accordion #acc=“ngbAccordion” [id]=“fqa.id”>

If will fix the issue the issue in ng-bootstrap. Meanwhile using a char as first character in the id is a workaround. This is the issue you have with the Panel --> start with a char will work. Thing is explained here: https://mathiasbynens.be/notes/css-escapes Best regards Florent