Angular - routerLink inside routerLink

Question

I have one problem: I have:

<div class="list-group-item clearfix dictionaryItem" style="cursor:pointer" [routerLink]="[index]">

  <div class="pull-right">
    <img src="/assets/delete-icon.png" width="25" height="25" (click)="onDelete()">
  </div>
</div>

I'd like to call ONLY onDelete() method when clicking on and go to another page ONLY when clicking my main ).

How can I do that? Or maybe my thinking is wrong? Maybe should I take another approach?

I'd like the whole main div to be like the button.

Thank you in advance! Mateusz

Answer 1

You want to pass $event to the onDelete() method and call stopPropagation() on it:

onDelete(event) {
  // do whatever you want to do
  event.stopPropagation();
}

Html:

<img src="/assets/delete-icon.png" width="25" height="25" (click)="onDelete($event)">

Sample on stackblitz