How to prevent default click behavior of a routerlink in angular app?

Question

Even though this is not angular specific in theory it needs to be solved in ng app and none of the examples work. I've seen all the answers in SO but none of those solutions seem to work in real life Angular7 app. For example none of the following work :

<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault();false">Properties
</a>

Creating a method for handler in component.ts and calling either function with or without returning false does not work either.

In addition, I don't want to disable link because it needs to be draggable / openable in other browser tab/window.

EDIT: Here is https://github.com/angular/angular/issues/21457 and I can make it to work by adding an element inside anchor and have the click for the inside element like this:

(click)="$event.stopPropagation();$event.preventDefault()"

My real world example has mat-icon inside anchor so I use that but in link above a span inside is suggested.

I personally have used return false and it works like a charm. Can you create a plunkr? — Vinod Bhavnani
– Vinod Bhavnani, Commented Jun 12, 2019 at 10:32
thanks for comment! (click)="return false" throws syntaxError in compiler.js TemplateParser. I have tried that also. — char m
– char m, Commented Jun 12, 2019 at 10:36
What you are probably looking for is the CanDeactivate guard. angular.io/api/router/CanDeactivate — Tim VN
– Tim VN, Commented Jun 12, 2019 at 11:15

Francesco · Accepted Answer · 2020-07-16 07:45:43Z

20

The reason routerLink does not respect preventDefault is described here.

The solution is to create inner element for anchor if there already isn't one (like icon). In the link above a span is created inside but I have icons inside anchors which I omitted from the question for clarity:

  <a class="nav-link" [routerLink]='["/map", sessionId]'>
    <mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
  </a>

edited Jul 16, 2020 at 7:45

Francesco

11k8 gold badges78 silver badges121 bronze badges

answered Jun 13, 2019 at 9:32

char m

8,39618 gold badges75 silver badges130 bronze badges

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

Collectives™ on Stack Overflow

How to prevent default click behavior of a routerlink in angular app?

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