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

Question

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?

Answer 1

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