How to expand multiple rows in a Mat Table on clicking of a row in Angular?

0
votes

I was trying to create a mat-table grid which allows expanding multiple rows on clicking of the rows.

Currently what I have allows only 1 row to expanded at once, when I click on the second row the first rows gets collapsed. Is it possible to expand multiple rows at a time without collapsing other?

I tried with [multiple] keywords but that didn't help.

StackBlitz Link for a single row expansion

1
angularangular-material

1 Answers

1
votes

One possible way to make multiple rows expanded

change the click handler from (tracking single item):

(click)="expandedElement = row"

to track multiple

(click)="toggleRow(row)"

TS part using a simple array to add / remove rows to be expanded

  toggleRow(row) {
    const index = this.expandedElements.findIndex(x => x.name == row.name);
    if (index === -1) {
      this.expandedElements.push(row);
    } else {
      this.expandedElements.splice(index, 1);
    }
  }

next change this:

[@detailExpand]="row.element == expandedElement ? 'expanded' : 'collapsed'"

to this:

[@detailExpand]="isExpanded(row)"

TS part

  isExpanded(row): string {
    if (
      this.expandedElements.findIndex(x => x.name == row.element.name) !== -1
    ) {
      return 'expanded';
    }
    return 'collapsed';
  }

Working Stackblitz