Angular 2 Material Design Expand All / Collapse All

Answer :

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.

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(); }   ... ...   

To use a toggle button (instead of 2 buttons like ibenjelloun's answer), you can use this in the template:

<button (click)="toggleExpandState()">{{ allExpandState ? "Collapse All" : "Expand All" }}</button>

and add this in the component:

toggleExpandState() { this.allExpandState = !this.allExpandState; }

This introduces a problem where if you expand all the panels manually, the button will still say "Expand All" and vice versa, so you could add a listener when expanding/collapsing a single panel to check if all the panels are expanded or collapsed, and change the variable allExpandState accordingly.

Also, you don't have to remove the mat-accordian, just add multi="true" to it.