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?
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.
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.
Definition and Usage The href attribute specifies the base URL for all relative URLs on a page.
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 }
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With