CODEWITHSUNDEEP
angulartypescriptangular-material
dernor00
dernor00

Reputation: 271

How to expand and collapse table row on click

I was learning from this example how to create a expandable Table. I'm a newbie with angular. What I want to do is when I click at the same row I can expand the row and when I click again at the same row I can collapse it.

Any suggestion of what I can do to add this functionality?

Upvotes: 1

Views: 1625

Answers (1)

nash11
nash11

Reputation: 8660

In your (click) event you are only setting expandedElement so it will always get selected. You need to instead toggle the value so the row can be deselected as well.

Change your (click) function to the following

<mat-row *matRowDef="let row; columns: displayedColumns;"
         matRipple 
         class="element-row" 
         [class.expanded]="expandedElement == row"
         (click)="expandedElement = expandedElement === row ? null : row">
</mat-row>

Upvotes: 2

Related Questions