Passive Link in Angular 2 - equivalent

Question

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.

Yes, it is still valid html, but the effect is not the same with Angular 1.x. — s.alem, Feb 25 '16 at 22:02
Yeah, but than the browser doesn't treat it in the same way. I know I can override i.e. the cursor effect with css, and assign pointer to all `a` tags. But that looks hacky. — s.alem, Feb 25 '16 at 22:14
My opinion is that ng1 way was the wrong way (: Default behavior should be as it is in standard html... — Sasxa, Feb 25 '16 at 22:18
Totally agree with @Sasxa, to be honest that sounds like a useless "feature". Why would a framework hijack my html by default and not let it work as it should? — Eric Martinez, Feb 25 '16 at 23:47
I am not sure about how passive links to be handled but it is not a useless feature, at least for me. It is quite handy, for example, when you want to use a link to access controller. — s.alem, Feb 26 '16 at 00:34
@EricMartinez I think the issue here is less about whether or not Angular should hijack the default behavior, but rather that Angular's router requires the use of the `` tag, so when you click on an `` link rather than navigating to `#` you end up at `/#` or whatever your base href is. Interested to see how this pans out in the GitHub issue. — lukiffer, Jul 04 '16 at 06:12
I have the same problem i solved it with a([routerLink]=""). it is in pug which is equal to — Sharifullah Sharif, Feb 14 '17 at 06:13

score 270 · Accepted Answer · edited Nov 06 '19 at 13:08

270

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>

edited Nov 06 '19 at 13:08

s.alem

12,579
9
44
72

answered Aug 02 '17 at 16:00

Emiel Koning

4,039
1
16
18

This generates a href="#/" at DOM (angular 4) – Irfan Raza Dec 16 '17 at 01:04
3

This worked `[routerLink]=""` it renders as `My Link` Angular 5 in Chrome 64. – Zymotik Jan 25 '18 at 11:01
3

I can confirm the same `[routerLink]=""` / `href="null"` is working in IE 11 – Zymotik Jan 25 '18 at 11:08
1

Click me works in angular7. I see Click me without routerLInk works in angular7 as well. what is better way to make a passive anchor link using [routerLink] or no routerLink? – Ian Poston Framer Jan 07 '19 at 19:53
1

@IanPostonFramer When I remove `[routerLink]=""`, the text _Click me_ is not displayed as a link and does not show hand cursor icon. – Emiel Koning Jan 08 '19 at 10:23
Why not just remove the href and replace it with nothing? We have CSS, so that negates the concern of the styles. – MrBoJangles Jul 10 '19 at 17:08
1

The accepted answer will reset the scroll position to the top, which may not be desirable in all situations. – ctaleck Sep 19 '19 at 19:39
9

NOTICE: this will reset your URL params. buyer beware. – Stavm Sep 22 '19 at 10:12
What about when you Right-click → Open in New Tab? The fact that it actually tries to navigate to /null at that point makes me weary of this approach. – Kerry Johnson Apr 05 '20 at 22:29
1

Use – SUHAIL KC Apr 08 '20 at 08:55
1

In Angular 11, it generates: `...`. On click, it won't trigger any route. – andreivictor Jan 09 '21 at 11:12
1

You might need to use `routerLink=""` rather than `[routerLink]=""` – Sean Jun 07 '22 at 12:35
`[routerLink]=""` works in angular 13 but it will not have hand cursor. How to fix this? – Rak Jun 23 '22 at 08:25
What is this "passTheSalt" method? – danielcaballero88 Dec 17 '22 at 03:30
You can call that if `isFoodTasteless` equals `true` @dancab – Emiel Koning Dec 18 '22 at 08:43

Pankaj Parkar · Answer 2 · 2018-09-23T09:52:44.547

108

That will be same, it doesn't have anything related to angular2. It is simple html tag.

Basically a(anchor) tag will be rendered by HTML parser.

Edit

You can disable that href by having javascript:void(0) on it so nothing will happen on it. (But its hack). I know Angular 1 provided this functionality out of the box which isn't seems correct to me now.

<a href="javascript:void(0)" >Test</a>

Plunkr

Other way around could be using, routerLink directive with passing "" value which will eventually generate blank href=""

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

edited Sep 23 '18 at 09:52

answered Feb 25 '16 at 21:58

Pankaj Parkar

134,766
23
234
299

@s.alem what ever you are saying, that having `#` inside anchor `href` can affect `Angular1` route..may send you to default page(if its there) – Pankaj Parkar Feb 25 '16 at 22:03
1

I know the effect of `#` in angular 1.x. I want a link that does nothing in angular2, just like `href=""` in angular 1.x. – s.alem Feb 25 '16 at 22:07
@s.alem so `My Link` will do that..but what happening currently with it? – Pankaj Parkar Feb 25 '16 at 22:08
It navigates to the app base like I said in my edit. – s.alem Feb 25 '16 at 22:08
Yeah, that would be a solution, but looks hacky. I still feel like there should be an out of box solution like in angular 1.x. – s.alem Feb 25 '16 at 22:16
This notation can generate errors in the console, fyi. such as: `XMLHttpRequest cannot load javascript:void(), Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.` – Max Apr 23 '17 at 07:39
@John this seems to be causing because of some chrome extension.. I also had some issue with my application when my app was handling CORS, it was getting failed – Pankaj Parkar Apr 23 '17 at 08:02
@PankajParkar Interesting, but it's an error reported by angular. We stepped away from using `` elements without a valid href, too many problems with the Angular2 routers, instead, we use a `` element with a link class and things work much better for us. – Max Apr 24 '17 at 18:22
Could you try to reproduce that error private window (as extension doesn't work there) It should work properly in that case.. – Pankaj Parkar Apr 24 '17 at 18:53
You can disable the `href` in a less hacky way using `preventDefault` like described here: https://stackoverflow.com/a/44465069/702783 – Michael Kühnel Oct 02 '17 at 11:49
A content security policy may block this answer, try `[routerLink]=""`. It will cause a `href="null"` to render. – Zymotik Jan 25 '18 at 11:14
1

[routerLink]="" will remove query params from your route, this is likely not what you want. You could use preserve query params, but this seems like going too far – narthur157 Feb 26 '18 at 15:07
The second options *does not work* for me in AngularDart, using `[routerLink]=""` with `(click)="navigateFunc(id)"` will send me back to the root `/`. If pushing back I get the navigation url I wanted and then if I push back again I get to my original page. The browser goes to both urls basically. – Paul Carlton Jul 14 '19 at 20:42
3

However, option 1: `href="javascript:void(0);"` DOES work for me. – Paul Carlton Jul 14 '19 at 20:44

score 22 · Answer 3 · answered Feb 26 '16 at 00:57

22

There are ways of doing it with angular2, but I strongly disagree this is a bug. I'm not familiarized with angular1, but this seems like a really wrong behavior even though as you claim is useful in some cases, but clearly this should not be the default behavior of any framework.

Disagreements aside you can write a simple directive that grabs all your links and check for href's content and if the length of it it's 0 you execute preventDefault(), here's a little example.

@Directive({
  selector : '[href]',
  host : {
    '(click)' : 'preventDefault($event)'
  }
})
class MyInhertLink {
  @Input() href;
  preventDefault(event) {
    if(this.href.length == 0) event.preventDefault();
  }
}

You can make it to work across your application by adding this directive in PLATFORM_DIRECTIVES

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: MyInhertLink, multi: true})]);

Here's a plnkr with an example working.

answered Feb 26 '16 at 00:57

Eric Martinez

31,277
9
92
91

Upvote for a global, angular solution, but I'm not accepting it as the correct answer because as I said, I'm only looking for an out box solution, until they confirm there won't be any or until I really really need it. But still thank you very much. – s.alem Feb 27 '16 at 20:26
2

The problem with `pointer-events` is the lack of support with IE ([caniuse](http://caniuse.com/#search=pointer-events)) (I can bypass it even with IE11 weirdly enough), and it doesn't prevent to *click* the link from the console. I've upvoted @Pankaj answer because it's the easiest one from my point of view, my answer is just a way of doing it with angular2, I could make it easier but css selectors are limited. – Eric Martinez Feb 28 '16 at 06:53
1

This seems to break bootstrap tab links (such as ) – xd6_ Nov 18 '16 at 18:33
Which module is bootstrap function in? – Jun Jul 05 '17 at 23:37

score 17 · Answer 4 · answered Jan 05 '17 at 09:09

17

An achor should navigate to something, so I guess the behaviour is correct when it routes. If you need it to toggle something on the page it's more like a button? I use bootstrap so I can use this:

<button type="button" class="btn btn-link" (click)="doSomething()">My Link</button>

answered Jan 05 '17 at 09:09

Jens Alenius

1,931
2
16
20

1

I like this solution. If you want to have cursor to show a hand, add style="cursor: pointer". – newman Apr 02 '17 at 01:15
In many situations a good solution, however be aware that the button has bigger dimensions than just the text based anchor. – yankee Apr 01 '19 at 08:12
@yankee you can change that in css, but I don't recommend... fact is, a button is a button, and a link is a link... too sad the web is not that white or black. – Ayyash Aug 15 '19 at 04:39

score 16 · Answer 5 · answered Dec 02 '16 at 08:01

16

I am using this workaround with css:

/*** Angular 2 link without href ***/
a:not([href]){
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none
}

html

<a [routerLink]="/">My link</a>

Hope this helps

answered Dec 02 '16 at 08:01

Sabri Aziri

4,084
5
30
45

1

This is a better solution as it's mainly a visual effect that's missing. You can put this CSS in the Angular project's top-level `styles.css` file and it will work great! – Nov 04 '19 at 15:18

score 13 · Answer 6 · answered Sep 20 '17 at 09:15

13

simeyla solution:

<a href="#" (click)="foo(); false">
<a href="" (click)="false">

answered Sep 20 '17 at 09:15

ali-myousefi

822
2
11
26

This appears to be the simplest and most elegant solution. – Purple Piranha Aug 08 '18 at 15:26
Simple answer – SUHAIL KC Apr 08 '20 at 08:54
1

just return false in the function, then you don't have to remember it in every tag you use the function. – thenetimp Mar 08 '21 at 23:06

Sal · Answer 7 · 2019-11-04T23:57:40.317

8

Here are some ways to do it:

<a href="" (click)="false">Click Me</a>
<a style="cursor: pointer;">Click Me</a>
<a href="javascript:void(0)">Click Me</a>

edited Nov 04 '19 at 23:57

answered Aug 04 '17 at 21:47

Sal

5,129
5
27
53

Nabin Kumar Khatiwada · Answer 8 · 2018-06-12T09:26:45.387

6

I have 4 solutions for dummy anchor tag.

    1. <a style="cursor: pointer;"></a>
    2. <a href="javascript:void(0)" ></a>
    3. <a href="current_screen_path"></a>

4.If you are using bootstrap:

<button class="btn btn-link p-0" type="button" style="cursor: pointer"(click)="doSomething()">MY Link</button>

edited Jun 12 '18 at 09:26

answered Apr 17 '18 at 14:40

Nabin Kumar Khatiwada

1,546
18
19

score 5 · Answer 9 · answered Jun 09 '17 at 19:05

5

You have prevent the default browser behaviour. But you don’t need to create a directive to accomplish that.

It’s easy as the following example:

my.component.html

<a href="" (click)="goToPage(pageIndex, $event)">Link</a>

my.component.ts

goToPage(pageIndex, event) {
  event.preventDefault();
  console.log(pageIndex);
}

answered Jun 09 '17 at 19:05

Michael Kühnel

139
2
10

This will go over updates and doesn't deal with routerlink or null values. – JoeCool Mar 09 '21 at 20:25

score 5 · Answer 10 · answered Mar 30 '21 at 21:19

5

Not sure why people suggest using routerLink="", for me in Angular 11 it triggers navigation. This is what works for me:

<div class="alert">No data yet, ready to <a href="#" (click)="create();$event.preventDefault()">create</a>?</div>

answered Mar 30 '21 at 21:19

Shrike

9,218
7
68
105

score 4 · Answer 11 · answered Jan 20 '17 at 20:49

4

Here is a simple way

  <div (click)="$event.preventDefault()">
            <a href="#"></a>
   </div>

capture the bubbling event and shoot it down

answered Jan 20 '17 at 20:49

born2net

24,129
22
65
104

Why not use the anchor itself for preventing the default behavior? Like described here: https://stackoverflow.com/a/44465069/702783 Seems less »hacky« to me. – Michael Kühnel Oct 02 '17 at 11:51

score 4 · Answer 12 · answered Feb 01 '18 at 14:54

Updated for Angular 5

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector : '[href]'
})
export class HrefDirective {
  @Input() public href: string | undefined;

  @HostListener('click', ['$event']) public onClick(event: Event): void {
    if (!this.href || this.href === '#' || (this.href && this.href.length === 0)) {
      event.preventDefault();
    }
  }
}

score 3 · Answer 13 · answered Mar 27 '17 at 14:22

3

In my case deleting href attribute solve problem as long there is a click function assign to a.

answered Mar 27 '17 at 14:22

Michał Ignaszewski

1,124
12
11

score 2 · Answer 14 · answered Apr 12 '17 at 01:15

2

A really simple solution is not to use an A tag - use a span instead:

<span class='link' (click)="doSomething()">Click here</span>

span.link {
  color: blue;
  cursor: pointer;
  text-decoration: underline;
}

answered Apr 12 '17 at 01:15

Jonathan

67
1
3

You shouldn’t do that in the sense of sematic markup. Use a `button` Element in case you want to `doSomething` on the page. – Michael Kühnel Jun 09 '17 at 18:57
` – Drenai Sep 28 '19 at 15:20
1

yeah, i appreciate the solution but this breaks accessibility for many of us – runderworld Aug 06 '20 at 22:06
This is never the right solution. Spans are meant for formatting text, anchors for linking, and navigation, Accessibility tools handle these differently. – thenetimp Mar 08 '21 at 23:07

score 1 · Answer 15 · answered Jul 15 '20 at 13:32

1

you need to prevent event's default behaviour as follows.

In html

<a href="" (click)="view($event)">view</a>

In ts file

view(event:Event){
 event.preventDefault();
 //remaining code goes here..
}

answered Jul 15 '20 at 13:32

U_R_Naveen UR_Naveen

720
7
8

score 0 · Answer 16 · answered Dec 22 '18 at 09:15

I wonder why no one is suggesting routerLink and routerLinkActive (Angular 7)

<a [routerLink]="[ '/resources' ]" routerLinkActive="currentUrl!='/resources'">

I removed the href and now using this. When using href, it was going to the base url or reloading the same route again.

score 0 · Answer 17 · answered Apr 24 '23 at 15:49

From Angular 13 and onwards, the behavior of routerLink has changed (source commit). To create a link that does nothing (while still having the "hand" icon) use the following:

<a routerLink="." queryParamsHandling="preserve"></a>

This will populate the link's href attribute with a link to the current page, so nothing happens when clicking on it. Keep in mind, that the queryParamsHandling="preserve" is necessary if your current route has any query params set to not remove them when clicking the link.

score -3 · Answer 18 · answered Jul 20 '16 at 00:06

Updated for Angular2 RC4:

import {HostListener, Directive, Input} from '@angular/core';

@Directive({
    selector: '[href]'
})
export class PreventDefaultLinkDirective {

    @Input() href;
    @HostListener('click', ['$event']) onClick(event) {this.preventDefault(event);}

    private preventDefault(event) {
        if (this.href.length === 0 || this.href === '#') {
            event.preventDefault();
        }
    }
}

Using

bootstrap(App, [provide(PLATFORM_DIRECTIVES, {useValue: PreventDefaultLinkDirective, multi: true})]);

Passive Link in Angular 2 - equivalent

18 Answers18

Linked