CODEWITHSUNDEEP
htmlangularangular-materialmat-table
risky
risky

Reputation: 109

Disable click on whole row in angular mat table

I have a mat-table with whole row click:

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="clickHandler(row)"></tr>

And I have click on certain row in this table:

<ng-container matColumnDef="test">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> test </th>
                <td mat-cell *matCellDef="let row" (click)="getRecord(row)"> {{row.test}} </td>
</ng-container>

How I can disable click on whole row((click)="clickHandler(row)") when I click on certain cell (click)="getRecord(row);

Upvotes: 1

Views: 2207

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9943

You can send $event to getRecord method and call stopPropagation(); of the event:

 getRecord(row,$event){
       $event.stopPropagation();
       ....
  }

And in your HTML:

<td mat-cell *matCellDef="let row" (click)="getRecord(row,$event)">

Here is working sample I create for you: StackBlitz

Upvotes: 2

Related Questions