Angular 2 <mat-expansion-panel> expand and collapse all

3
votes

I have an example: https://stackblitz.com/edit/stackoverflow-49230894 ... Here is a problem: When I expand item by the hand, "collapse all" won't work (the same when I "expand all", then collapse manually items, "expand all" button won't work). Any ideas for the fix?

1
angularangular-material2
yes, there is issue if manually collapse or un-collapse. – Wasif Khan

1 Answers

9
votes

The main problem here is all material component/directive have an OnPush detection strategy. So if the reference of the input doesn't change ( for Object/Array, or the value of the primitive for string/number/boolean ) the component is not re-rendered.

In your case, if you expand all panels you set allExpandState to true, but even if you manually close a panel the allExpandState stay at true. So if you click again to expand all, the allExpandState stay to true and the panels are not re-rendered.

Here is a forked Stackblitz with a solution (certainly not the only available).

The main topic is to get all instance of MatExpansionPanel with 

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

And then in the allExpandState setter to manually open or close all the panels with 

this.viewPanels.forEach(p => value ? p.open() : p.close());