Angular 2 material design <mat-expansion-panel> expand all / collapse all

Question

I wanted to implement expand all and collapse all in angular 2 material. Can any one give idea? how to do that?

Answer 1

Source Link

For the latest version of Angular material 8

Template

<button mat-flat-button color="primary" (click)="openAllPanels()"><b>Open Panels</b></button> &nbsp;
<button mat-flat-button color="primary" (click)="closeAllPanels()"><b>Close Panels</b></button>

<mat-accordion [multi]="true"
#accordion="matAccordion"
>
  <mat-expansion-panel 
  #mapanel="matExpansionPanel"
  >
    <mat-expansion-panel-header>
        <b>Title</b>
    </mat-expansion-panel-header>
    <p>Description</p>
    <mat-action-row>
        <button mat-flat-button (click)="mapanel.close()">Click to close</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

Component

import { MatAccordion } from '@angular/material';

...
...

@ViewChild('accordion',{static:true}) Accordion: MatAccordion


...

...

closeAllPanels(){
    this.Accordion.closeAll();
}
openAllPanels(){
    this.Accordion.openAll();
}


...
...  

Answer 2

1- You should remove the mat-accordion to enable multiple expanded panels.

2- Use the expanded parameter to change multiple states at the same time.

Here is a running example.

EDIT

From version 6.0.0-beta-0 you can use multi parameter and the openAll and closeAll functions :

1- Change the mat-accordion element to set the muti to true and get the MatAccordionComponent instance :

<mat-accordion #accordion="matAccordion" [multi]="true">

2- Then use the openAll and closeAll functions to open or close all panels :

<button (click)="accordion.openAll()">Expand All </button>
<button (click)="accordion.closeAll()">Collapse All </button>

Here is a running example.