How to expand all mat-expansion-panel with complex array by click a button?

Question

I am trying to display Mat-expansion-panel by click "open all" button. Now, i face the problem is inner panel is not working. It only can open the outside only. I would like to open all panel with inner panel. How to achieve it ? Please help. stackblitz link

score 2 · Accepted Answer · answered Aug 05 '22 at 07:04

You are trying to expand expansion panels, but you are selecting accordion, this is the problem with your code, what you can do is use viewchildren , select all expansion panels, and then open them when you want. here is how the code will look like

  @ViewChildren(MatExpansionPanel) panels: QueryList<MatExpansionPanel>;


openAll(){
this.panels.forEach(panel => panel.open();)}

score 1 · Answer 2 · answered Aug 05 '22 at 06:59

Get all expansion panel instance using ViewChildren decorator

@ViewChildren(MatExpansionPanel) expansionPanel: QueryList<MatExpansionPanel>;

Then call open method on it when you click openAll button

openll() {
    this.expansionPanel.toArray().forEach((panel)=>{
      panel.open();
    })
}

Forked Working Example

How to expand all mat-expansion-panel with complex array by click a button?

2 Answers2