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

Sounds like you maybe want to implement a RouteGuard https://angular.io/guide/router#guards — Zze, Mar 19 '18 at 22:50
No, I don't think so. I could thanks to RouteGuard create a new flag onlyIMGWasClicked: boolean and with this flag on method canActivate check if I can go to the proper page or not...Hmm the question is if this approach is professional — Matley, Mar 19 '18 at 22:56
i think you can put in your (click)="onDelete($event)" function event.stopPropogation() method. This will stop propagate event when you click on your delete button but you still can click on all your block (except delete button) and go to the index page. — Roman Skydan, Mar 19 '18 at 23:01

score 2 · Accepted Answer · answered Mar 19 '18 at 23:14

2

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

answered Mar 19 '18 at 23:14

Jason Goemaat

28,692
15
86
113

AAAAh, I completely forgot about stopPropagation(). It works without problems. Thank you!!! – Matley Mar 20 '18 at 11:19

Angular - routerLink inside routerLink

1 Answers1