Empty href attribute navigates to the app base

[salemdar]

<a href="">My Link</a> would do nothing in Angular 1.x, but it navigates to the app base in Angular 2.

Is this the desired behavior or a bug? If it is the former, than what would be the equivalent of href="" in Angular2?

[zoechi]

See also http://stackoverflow.com/questions/35639174/passive-link-in-angular-2-a-href-equivalent

[nblasgen]

Zoechi, I'm not yet on Angular2, but almost all regular Angular documentation will tell you to do <a href>My Link</a> and not<a href="">My Link</a>. Try removing the equal & quotes and I wouldn't be surprised if that fixes things for you.

[0x-r4bbit]

@salemdar do you get the same behaviour in A1 when you set a <base href> ?

Also, what's your use case? Why are you trying to build a link without an href?

[salemdar]

@nblasgen Removing the equal & quotes doesn't make a difference both in angular 1.x and 2, at least not anything I can notice.

@PascalPrecht I get the same behavior with and without <base href> in angular 1.x. For example, it comes handy when you want to use a link to call a function from controller.

I always thought that it was a well known and frequently used feature. But the reaction I get from people makes me think that it might not even be a desired feature in angular 1.x.

Note:
I'm not looking for css or js hacks for the use case example above. I could do that myself. I'm just interested in an out of box solution.

[0x-r4bbit]

I'm might be big of a friend of semantic HTML, but I'd say that an anchor, without an actual href is not an anchor. So in other words, if it doesn't have an href then an anchor tag might not be the right element for your use case, regardless of what Angular does with it.

[salemdar]

@PascalPrecht Even in this very page's source, if you search for an anchor tag with manual-file-chooser-tex class, you'll see a link which is not even accessible, but only there for design purposes.
Sometimes you might want a link to act like a button. I'm not an expert on HTML standards, but I think using a simple anchor tag which does not trigger navigation is much more convenient than styling a <button> like a link. But I would not insist on doing things wrong if it is really the wrong way.

[xak2000]

I think the big problem here is requirement of base tag by angular2 router.

The base tag is very controversial and in practice causes more problems than solutions. Problems with SVG, problems with # (real #, that points to id of element on the page). See this SO question for more info.

Many of these problems can be solved in codebase, but not when they are in 3d-party library.

I checked several popular sites and none of them use base tag. Even angular.io doesn't use it. Of course, it could be a coincidence, but it looks more like a trend.

Any chances that this requirement will be removed?

[lukiffer]

I think the meat of this issue is in preventing default behavior in the case that both a (click) and href attribute are specified on an anchor.

As a user migrating from angular1 I would expect <a href="#" ng-click="foo()">bar</a> to behave the same as <a href="#" (click)="foo()">bar</a>.

For the time being, the best "workaround" I've come up with is <a href="javascript:void(0);" (click)="foo()">bar</a> which is less than ideal.

The inverse scenario is where href isn't equal to # and you're intending to fire off both the browser navigation and the handler, but these would seem less prevalent than the former scenario IMHO.

That said, I also agree with @xak2000 that the use of the <base> tag poses the potential to cause significant conflicts with third-party components, such as photo album viewers that use # for linking directly to a specific photo, or Bootstrap's tab component that uses a hash to link to a specific tab.

I think this is a separate issue though that goes beyond behavioral consistency and treads into "should the router be changed (yet again) to aid compatibility with third party code?" My personal take on that is "no", as I believe that once angular2 reaches wider adoption, those third-party pieces will be brought up to date to be compatible with the new router framework, or use-case specific shims will be made available on a case-by-case basis.

[ShadowManu]

bump?

[simeyla]

Another way is <a href="#" (click)="foo(); false">bar

You shouldn't return false from foo() because that's just icky

[paustint]

I am looking to have an element act as a link with the mouse responding to the hover element and I am getting a page refresh. It is standard html behavior (for anything aside from ng2) to be able to use <a href="#">Some content</a> for something that acts as a link but does not take the user anywhere. Having a page refresh occur was not the behavior I was expecting and is annoying to workaround.