CODEWITHSUNDEEP
angularangular-material
Irfan Y
Irfan Y

Reputation: 1310

Angular table prevent row click when column is clicked

When I click on table row, it should expand and show some extra data but when I click on a column, it should not expand the row, rather than perform column click.

I have simplified the code, please check the complete code example here

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element" (click)="weightCicked(element)"> {{element.weight}} </td>
      </ng-container>
    
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row (click)="rowclicked(row)" *matRowDef="let row; columns: displayedColumns;"></tr>

When I click on weight column, rowClicked is also called, how can I call only weightCicked method?

Upvotes: 1

Views: 3647

Answers (1)

Kirubel
Kirubel

Reputation: 1627

You can add $event.stopPropagation(); while binding (click) on your td

<td mat-cell *matCellDef="let element" (click)="weightCicked(element); $event.stopPropagation();"> {{element.weight}} </td>

Upvotes: 9

Related Questions