Expand and collapse table row in angular material

Question

Below is the example where only expansion is happening, but I want the row to collapse when you click it.

https://stackblitz.com/edit/angular-material-expandable-table-rows?file=app%2Ftable%2Ftable.component.ts

I want my table to be like this:

Please help.

Answer 1

Replace (click)="expandedElement = row"

with

(click)="expandedElement === row? expandedElement = null : expandedElement = row"

https://stackblitz.com/edit/angular-material-expandable-table-rows-8ypyfu?file=app%2Ftable%2Ftable.component.html