Angular Material Table: action button also clickable-CodePudding

In the Angular Material table, I have done the following code in the html:

<mat-table [dataSource]="dataSource1" >
<ng-container matColumnDef="col1">
  <mat-header-cell *matHeaderCellDef> Col1 </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.col1}} </mat-cell>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="col2">
  <mat-header-cell *matHeaderCellDef> Col2   </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.col2}} </mat-cell>
</ng-container>
<ng-container matColumnDef="action">
  <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
  <mat-cell *matCellDef="let element"> <a  (click)="anotherFunction()"> delete</a> </mat-cell>
</ng-container>
<mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row>
</mat-table>

In the related .ts file, I wrote the below:

displayedColumns: string = ['col1', 'col2', 'action'];
getRecord(row) {
  ...
}

I see all row/records are clickable along with the delete hyperlink for the getRecord() function. I want the action link to be non clickable for getRecord(). I want, when I click in delete link, it will call the function - anotherFunction().

I used *ngIf="" in the <mat-row but is showing console error.

CodePudding user response：

Try

html:

(click)="anotherFunction($event)"

ts:

anotherFunction(event) {
  event.stopPropagation();
  // your code
}