Search code examples
angularroutesangular2-routingangular-router

Passive Link in Angular 2 - <a href=""> equivalent

In Angular 1.x I can do the following to create a link which does basically nothing:

<a href="">My Link</a>

But the same tag navigates to the app base in Angular 2. What is the equivalent of that in Angular 2?

Edit: It looks like a bug in the Angular 2 Router and now there is an open issue on github about that.

I am looking for an out of the box solution or a confirmation that there won't be any.

Solution

  • If you have Angular 5 or above, just change 

    <a href="" (click)="passTheSalt()">Click me</a>

    into

    <a [routerLink]="" (click)="passTheSalt()">Click me</a>

    A link will be displayed with a hand icon when hovering over it and clicking it won't trigger any route.

    Note: If you want to keep the query parameters, you should set queryParamsHandling option to preserve:

    <a [routerLink]=""
   queryParamsHandling="preserve"
   (click)="passTheSalt()">Click me</a>