How can the igx-expansion-panel close when nested angular accordion comes?

Question

I am trying to close the igx-expansion-panel. It's working fine with the normal panel. I am applying nested angular accordion with igx-accordion. here is an example.

HTML File :

Here I used 3 parent panels and inside 2 parent panels 2 2 child panels. I am trying to collapse and expand this panel using a function. In parent, it's working. But i don't know how this works with the child panel.

<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>
  <!-- Here I am trying to open panel 2 -> Nested Panel 2.1 -->
  <button type="button" igxButton (click)="childExpandPanel(2, 1)">
    Child Expand Panel
  </button>

  <!-- Here I am trying to collapse panel 2 -> Nested Panel 2.1 -->
  <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' },
      ],
    },
    // Add more panels as needed
  ];

  parentExpandPanel(event: any) {
    this.accordionPanels.toArray().forEach((panel) => panel.open());
  }

  parentCollapsePanel(event: any) {
    this.accordionPanels.toArray().forEach((panel) => panel.close());
  }

  //Here I am trying to open panel 2 -> Nested Panel 2.1
  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();
  }

  //Here I am trying to open panel 2 -> Nested Panel 2.1
  childCollapsePanel(panelIndex: number, nestedPanelIndex: number) {
    // const nestedAccordion =
    //   this.accordionPanels.toArray()[panelIndex].nestedPanels[nestedPanelIndex];
    // nestedAccordion.close();
  }

Here is the documentation for nested-angular-accordions-scenario In documentation also not mention how can we close particular nested accordion close and expand. Does anyone know how can we perform collapse and expand when nested accordion comes?

Answer 1

I guess you already checked the igx-accordion API docs? There you can find the expandAll() and collapseAll() methods, instead of itterating through each panel and executing the open() method. I see that you are already using the panels collection which gives you the ExpansionPanel components which you can use with open() or close().