1

If I want to add a dead link to an anchor tag because I want to use (click) instead then I can use either [routerLink]="" or href="javascript:void(0);". Both has the same effect and I see no difference in browser compatibility.

Which one is prefered to use? Is there any difference?

Casper Nybroe
  • 1,179
  • 3
  • 23
  • 47
  • 1
    If it's a deadlink on which you bind `click` event, you don't need both. – ADreNaLiNe-DJ Jun 08 '18 at 06:44
  • I weren't using both - just one or the other. The question states which would be prefered to use. – Casper Nybroe Jun 08 '18 at 07:50
  • What i'm saying is that none is needed. ;) – ADreNaLiNe-DJ Jun 08 '18 at 08:35
  • So you mean "you don't need any" then? ;) But I agree - unless you want the styling for an anchor which is only added if you add the href or routerLink attribute to the tag. I know you can just create your own stylings but keeping the default styling just by adding one of the attributes makes perfect sense to me. :) – Casper Nybroe Jun 08 '18 at 08:56
  • This is what i mean. But making styling based on `href` attribute (or routerLink) is a bad practice. One should use `class` attribute or other kind of selector. ;) – ADreNaLiNe-DJ Jun 08 '18 at 09:29
  • So you suggest not to add href or routerLink, manually duplicating the default link styling af an anchor and add it as a class to every anchor tag? – Casper Nybroe Jun 08 '18 at 09:48
  • Exactly. It will not cause side effects like with adding `href` or `routerLink`. It will require to redefine default link style but, imho, it's simpler to deal with css than trying to compensate side effects with these attributes in Angular. – ADreNaLiNe-DJ Jun 08 '18 at 10:00

1 Answers1

6
[routerLink]=""

What this line does it, It will redirect to your home route/root route, whereas

href="javascript:void(0);"

The void operator evaluates the given expression and then returns undefined.

for more information read out here -

* What does “javascript:void(0)” mean?

Apart from this if you want to make it a as deadlink just pass event through the click event and use event.preventDefault() which will stop default action of anchor tag will execute what you want to do.

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215