Angular 2 material design 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?

Maybe with the **[expansion panel](https://material.angular.io/components/expansion/overview)** ? Otherwise, we're not doing your job for you, provide some code and/or what you already tried. — , Mar 12 '18 at 08:28
yes this expansion panel only, but I have toggle button to expand all / collapse all. — Honey, Mar 12 '18 at 08:31
Possible duplicate of [Expandable table rows in angular 4 with angular material](https://stackoverflow.com/questions/46123854/expandable-table-rows-in-angular-4-with-angular-material) — John, Mar 12 '18 at 08:41

ibenjelloun · Accepted Answer · 2019-05-09T09:11:12.767

36

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.

edited May 09 '19 at 09:11

answered Mar 12 '18 at 09:31

ibenjelloun

7,425
2
29
53

1

this will not work for version 7. Need to use `multi` to `true` for `accordin` – Sreekumar P May 08 '19 at 12:02
Still working with version 7 : https://stackblitz.com/edit/stackoverflow-49230894-2, the accordion with multi to true also works : https://stackblitz.com/edit/stackoverflow-49230894-3 . I'll edit my post with the multi solution. – ibenjelloun May 08 '19 at 14:41

score 6 · Answer 2 · edited May 21 '20 at 13:59

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


...
...

Not working for me if i set the property `static` to `true`. Must be `false` since angular material 8.2.3. — liqSTAR, Dec 06 '19 at 08:10
If you add [multi]="true" to mat-accordion and your answer will work and be full and better — Rahimjon Rustamov, May 20 '20 at 06:33

score 2 · Answer 3 · answered Mar 17 '19 at 22:40

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.

Angular 2 material design expand all / collapse all

3 Answers3

Linked