Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 6 - <a> href gets appended to base url

Tags:

html

angular6

I have a list of users displayed in the table and each users has link which is displayed and can be navigated to.

<div class="inline-icon-text">
  <small class="text-muted d-md-none mr-3">Link</small>
  <a [attr.href]="candidate.url" target="_blank" [title]="candidate.url">
    <i class="material-icons">open_in_new</i>
  </a>
</div>

Problem is, when I inspect link element it points to correct address but after clicking on it gets appended to app base url.

<a _ngcontent-c15="" target="_blank" href="www.test.sk" title="www.test.sk">...</a>

And after click it gets opened in the new tab with address localhost:4200/www.test.sk

What do I miss?

like image 876
mat.hudak Avatar asked Aug 06 '18 12:08

mat.hudak


People also ask

Does href work in Angular?

AngularJS ng-href DirectiveThe ng-href directive should be used instead of href if you have AngularJS code inside the href value. The ng-href directive makes sure the link is not broken even if the user clicks the link before AngularJS has evaluated the code.

How do I change a link in href?

To set of modify the value of the href attribute of a link or the <a> tag, you can use the jQuery . attr() method. This method can also be used to get the value of any attribute.

What is BASE href?

Definition and Usage The href attribute specifies the base URL for all relative URLs on a page.

What is base URL in Angular?

You just need to put a <base> tag in the head of the index or Layout page and specify a base URL like this: <base href="/client1/" /> So if you had an Angular route defined like this: { path: 'home', component: HomeComponent }


1 Answers

Always prepend your absolute external links with protocol or // shortcut for http:// OR https:// depending on your app's protocol.

<div class="inline-icon-text">
  <small class="text-muted d-md-none mr-3">Link</small>
  <a [attr.href]="'//' + candidate.url" target="_blank" [title]="candidate.url">
    <i class="material-icons">open_in_new</i>
  </a>
</div>

Browsers treat URLs as relative by default to facilitate in-app navigation.

As a side note, this behavior is not Angular-specific; other frameworks and plain sites behave exactly the same

like image 123
Tomasz Błachut Avatar answered Sep 21 '22 19:09

Tomasz Błachut