CODEWITHSUNDEEP
angularhtml-tableangular-material
app
app

Reputation: 207

angular material table with row click and action buttons as a separate actions

I am looking for solution to support the row click and action as a separate function in the angular material table.

I have tried following:

https://stackblitz.com/edit/angular-minimal-material-table-action-buttons-omoogj

I would like to achieve this functions:

  1. on row click I would like to navigate to different detail URL page
  2. on edit action click I would like to open different URL.

Issue: I am not able to differentiate the row click vs the action items click as both falls in the same row.

Is there anyone found solutions for this or angular material supports this behavior?

enter image description here

current behavior:

enter image description here

Upvotes: 2

Views: 3782

Answers (2)

Benjamin Hofstetter
Benjamin Hofstetter

Reputation: 132

You have to stop the propagation of the event.

    <a mat-icon-button (click)="edit($event)">
        <mat-icon>edit</mat-icon>        
      </a>


  edit(e) {
    e.stopPropagation();
    console.log('edit');
  }

Upvotes: 0

Amit Hadary
Amit Hadary

Reputation: 498

If I understand correctly what you are looking for is Event.stopPropagation().

Try implementing it like that:

<a mat-icon-button (click)="$event.stopPropagation()">
  <mat-icon>edit</mat-icon>
</a>

By default click event bubbles through the DOM tree and is being fired on every layer.

Upvotes: 1

Related Questions