angular material expansion panel collapse issue

Question

Please can someone fix this stackblitz

https://stackblitz.com/edit/angular-jd1ss7?file=src/app/expansion-expand-collapse-all-example.html

I have tabs and expansion panels inside.

Though I do not want to use expand , collapse ( will put action to tab selection change) I dont mind if it works with buttons in the example

Goal: Only 1 panel should be expanded. (2) when I switch between tabs, all expansion panels should get closed.

NOTE: I've removed <mat-accordion class="example-headers-align" multi> - multi, as it expands more than 1 in same tab. ( violates my requirement, so removed from original example)

Ralpharoo Ralpharoo · Accepted Answer · 2020-12-12T23:59:19

By using a MatAccordian with mutli="false" you will only be able to view one panel at a time from within the group.

To close all panels when a tab changes, you can use a change event from the MatTabGroup to call a function (selectedTabChange)="tabChange()".

This function can then access all MatExpansionPanel and close them. You can use ViewChildren to dynamically select these.

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

tabChange() {
  this.panels.toArray().forEach(p => p.close());   
}

Try this example: https://stackblitz.com/edit/angular-jd1ss7-uauyvz?file=src/app/expansion-expand-collapse-all-example.ts

angular material expansion panel collapse issue

1 Answers