CODEWITHSUNDEEP
angularangular-materialmat-tableangular-material-table
Patola
Patola

Reputation: 683

Angular Mat-table with expandable rows - stop expansion on row button click

I want the row expansion disabled when a user clicks on buttons located on the row. Especially if we have a popup menu per row, it's really distracting when row expansion happens simultaneously. Is there a way to stop this from happening.

see the example below, when the user tries to click on three verticle dots at the right end of the row, row expands. In fact, this occurs for any button click on the row. https://stackblitz.com/edit/angular-uy3mc4-cfmqoh

Upvotes: 0

Views: 1890

Answers (1)

yax
yax

Reputation: 48

A simple approach would be to call the $event.stopPropagation() event handler to prevent the panel receiving the click event. For example:

instead of 

<button mat-icon-button (click)="editAsset(row)" title="Edit">
   <mat-icon color="primary">mode_edit</mat-icon>
</button>

use

<button mat-icon-button (click)="$event.stopPropagation(); editAsset(row)" title="Edit">
   <mat-icon color="primary">mode_edit</mat-icon>
</button>

Upvotes: 3

Related Questions