Angular Material Table: action button also clickable

Question

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

<mat-table [dataSource]="dataSource1" class="mat-table">
<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 class="remove" (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.

Taras · Accepted Answer · 2022-07-27 07:49:51Z

2

Try

html:

(click)="anotherFunction($event)"

ts:

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

answered Jul 27, 2022 at 7:49

Taras

1,1455 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Table: action button also clickable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related