How to create an Expand All Button for Mat-table so that it expands every row in the table in Angular 8?

1
votes

I am using Angular Mat-Table and have created a table with expandable rows just like the one below in Angular 8:

https://stackblitz.com/angular/qykjaloknex?file=app%2Ftable-expandable-rows-example.ts

I wanted to know if there was a way that I can create an expand all button that will expand every single row at one time instead of having to click on each row at a time to expand it.

Thank you!

1
angularangular-materialmat-table

1 Answers

2
votes

You can do that by introducing a property that you can toggle (via a button for example) that you check in addition to the expandedElement.

Add a button in the template to toggle the expand/collapse all:

<button mat-raised-button (click)="toggle()">{{allRowsExpanded ? 'Collapse' : 'Expand'}}</button>

Change the condition for a row to be expanded:

<div class="example-element-detail"
           [@detailExpand]="(element == expandedElement || allRowsExpanded) ? 'expanded' : 'collapsed'">

And wire it up in the component:

allRowsExpanded: boolean = false;

public toggle() {
  this.allRowsExpanded = !this.allRowsExpanded;
  this.expandedElement = null;
}

Have a look at this stackblitz for a working example.