CODEWITHSUNDEEP
angularangular-material
Honey
Honey

Reputation: 386

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

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

Upvotes: 15

Views: 45491

Answers (3)

Code Spy
Code Spy

Reputation: 9964

Source Link

For the latest version of Angular material 8

enter image description here

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


...
...

Upvotes: 7

ibenjelloun
ibenjelloun

Reputation: 7733

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.

Upvotes: 40

Russell Chisholm
Russell Chisholm

Reputation: 665

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.

Upvotes: 2

Related Questions