Reputation: 3574
Given a Angular Material table. Each row shows a name and a link, both in its own cells. I want to call the function rowFunction
whenever somebody clicks anywhere on the row, and call the linkFunction
whenever somebody clicks the link.
My current solution is the following.
The problem is, that clicking on the link will call both the rowFunction
and the linkFunction
. But I only want to call the linkFunction
, not both at the same time.
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<ng-container matColumnDef="link">
<th mat-header-cell *matHeaderCellDef>Link</th>
<td mat-cell *matCellDef="let row">
<a (click)="linkFunction(row)">Link</a>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="rowFunction(row)"></tr>
</table>
Link to codesandbox.io: https://codesandbox.io/s/awesome-cookies-qf3bo?file=/src/app/table.component.html
How can I avoid the click to the row, when I click the actual link in the cell?
Upvotes: 3
Views: 1281
Reputation: 465
I have to handle this as well. I have to support the user being able to select a row as well as to click a link in the row without selecting the row.
I'm handling it like this (the switch statement lists every tag that appears in my rows that I want to treat like a select target) :
public RowClicked(event: any) {
switch (event.target.nodeName) {
case "TD":
case "PROPERTY":
case "DIV":
case "SPAN":
case "P":
//handle the actual row selection
break;
}
}
The tr has a click event like this:
(click)="RowClicked($event)"
Since A isnt in that switch statement, the row select callback isn't called.
Upvotes: 1
Reputation: 2738
You need to pass the click event to your linkFunction
and call stopPropagation.
The template:
<td mat-cell *matCellDef="let row">
<a (click)="linkFunction($event, row)">{{row.link}}</a>
</td>
The function:
linkFunction(evt, row): void {
console.log("called link function");
evt.stopPropagation();
}
Here's a stackblitz demonstrating
Upvotes: 3