Currently, I am faced with the challenge of closing the igx-expansion-panel within my Angular project. While everything functions smoothly with a standard panel, things get a bit tricky when dealing with nested angular accordion structures using igx-accordion. You can refer to this example for more clarity.
HTML File :
The setup involves 3 parent panels, each containing 2 child panels. I've been experimenting with collapsing and expanding these panels through a function call. While it seems to work well on parent panels, I have yet to figure out how to achieve the same functionality on child panels.
<igx-switch [(ngModel)]="singleBranchExpand">Single Branch Expand</igx-switch>
<article class="sample-wrapper">
<button type="button" igxButton (click)="parentExpandPanel($event)">
Parent Expand Panel
</button>
<button type="button" igxButton (click)="parentCollapsePanel($event)">
Parent Collapse Panel
</button>
<!-- Triggering expansion in Nested Panel 2.1 under Panel 2 -->
<button type="button" igxButton (click)="childExpandPanel(2, 1)">
Child Expand Panel
</button>
<!-- Triggering collapse in Nested Panel 2.1 under Panel 2 -->
<button type="button" igxButton (click)="childCollapsePanel(2, 1)">
Child Collapse Panel
</button>
<igx-accordion #accordion [singleBranchExpand]="singleBranchExpand">
<igx-expansion-panel *ngFor="let panel of panels; let i = index" #panel>
<igx-expansion-panel-header>
<igx-expansion-panel-title>
{{ panel.title }}
</igx-expansion-panel-title>
</igx-expansion-panel-header>
<igx-expansion-panel-body>
{{ panel.content }}
<igx-accordion #nestedAccordion *ngIf="panel.nestedPanels">
<igx-expansion-panel
*ngFor="let nestedPanel of panel.nestedPanels; let j = index"
#nestedPanel
>
<igx-expansion-panel-header>
<igx-expansion-panel-title>
{{ nestedPanel.title }}
</igx-expansion-panel-title>
</igx-expansion-panel-header>
<igx-expansion-panel-body>
{{ nestedPanel.content }}
</igx-expansion-panel-body>
</igx-expansion-panel>
</igx-accordion>
</igx-expansion-panel-body>
</igx-expansion-panel>
</igx-accordion>
TS File :
@ViewChild('accordion', { static: true }) accordion!: IgxAccordionComponent;
@ViewChildren(IgxExpansionPanelComponent)
accordionPanels: QueryList<IgxExpansionPanelComponent>;
public singleBranchExpand = false;
// Sample data for expansion panels
public panels = [
{ title: 'Panel 1', content: 'Content for Panel 1' },
{
title: 'Panel 2',
content: 'Content for Panel 2',
nestedPanels: [
{ title: 'Nested Panel 2.1', content: 'Content for Nested Panel 2.1' },
{ title: 'Nested Panel 2.2', content: 'Content for Nested Panel 2.2' },
],
},
{
title: 'Panel 3',
content: 'Content for Panel 3',
nestedPanels: [
{ title: 'Nested Panel 3.1', content: 'Content for Nested Panel 3.1' },
{ title: 'Nested Panel 3.2', content: 'Content for Nested Panel 3.2' },
],
},
// Additional panels can be added here
];
parentExpandPanel(event: any) {
this.accordionPanels.toArray().forEach((panel) => panel.open());
}
parentCollapsePanel(event: any) {
this.accordionPanels.toArray().forEach((panel) => panel.close());
}
//Triggering expansion in Nested Panel 2.1 under Panel 2
childExpandPanel(panelIndex: number, nestedPanelIndex: number) {
console.log(
'this.accordionPanels.toArray()[panelIndex] :',
this.accordionPanels.toArray()[panelIndex]
);
// const nestedAccordion =
// this.accordionPanels.toArray()[panelIndex].nestedPanels[nestedPanelIndex];
// nestedAccordion.open();
}
//Triggering collapse in Nested Panel 2.1 under Panel 2
childCollapsePanel(panelIndex: number, nestedPanelIndex: number) {
// const nestedAccordion =
// this.accordionPanels.toArray()[panelIndex].nestedPanels[nestedPanelIndex];
// nestedAccordion.close();
}
For detailed information on handling nested angular accordions scenario, you can check out the documentation. However, I noticed that the documentation lacks instructions on how to specifically close or expand individual nested accordions. If anyone has insights on how to tackle this issue, please share your knowledge.