CODEWITHSUNDEEP
javascriptangulartypescriptng-bootstrap
Donia Zaela
Donia Zaela

Reputation: 327

How to access a specific accordion in a list of accordions generated inside ngfor in angular 2

I have a list of child accordions generated, each inside one panel of a list of panels generated using ngFor inside a parent accordion. I need to toggle a specific child accordion according to some logic. However it does not work, I cannot identify one accordion in the list of accordions generated in the ngfor.

In the html file

<ngb-accordion #acc1="ngbAccordion" >
 <ngb-panel #parentPanel *ngFor="let parentPanel of parentPanels; let parentPanelIndex=index" id="{{parentPanelIndex}}">
   <ngb-accordion #acc2="ngbAccordion" >
    <ngb-panel *ngFor="let childPanel of ChildrenPanels; let childPanelIndex=index" id="{{childPanelIndex}}">
  ....

In the ts file:

@ViewChildren('parentPanels') parentPanels: QueryList<NgbPanel>;
....
this.parentPanels.toArray()[this.parentPanelIndex]

The last line would give me a reference to a specific panel according to the value stored in "parentPanelIndex". Now I have access to the parent panel, but I do not know how to get a reference to the accordion (acc2) in that panel. Any suggestions?

Upvotes: 0

Views: 1421

Answers (2)

Niladri Basu
Niladri Basu

Reputation: 10614

ngbAccordion has a property known as activeIds which accepts ID of all the ngb-panel you want to keep open.

activeIds should be an array of IDs you want to keep open.

For more info here's the official documentation.

Upvotes: 0

segito10
segito10

Reputation: 388

You can use the querySelector to get the child at a custom position like 

 const child = this.panelsView
    .nativeElement
    .querySelector(`:nth-child(${this.elem})`);
    this.result = child.innerHTML;

you can find an exemple here https://stackblitz.com/edit/angular-dwmajp

Upvotes: 1

Related Questions