Reputation: 3198
I have an angular 5 component that needs to open a link in new tab, I tried the following:
<a href="www.example.com" target="_blank">page link</a>
when I open the link, the application gets slow and opens a route like:
localhost:4200/www.example.com
My question is: What is the correct way to do this in angular?
Upvotes: 237
Views: 424978
Reputation: 21
In your component.html, Add this following html code
<a [routerLink]="" (click)="openSiteinNewTab()">click here to view</a>
In your component.ts, Add the following Typescript code
export class AppComponent {
siteUrl = "stackoverflow.com";
openSiteinNewTab() {
window.open("//" + this.siteUrl, '_blank');
}
}
Upvotes: 2
Reputation: 5957
Use window.open()
. It's pretty straightforward !
In your component.html
file:
<a (click)="goToLink('www.example.com')">page link</a>
You may have to add the http
prefix if it doesn't redirect correctly:
<a (click)="goToLink('http://www.example.com')">page link</a>
In your component.ts
file:
goToLink(url: string){
window.open(url, "_blank");
}
Upvotes: 314
Reputation: 29
u can add https in your code and it works for me
goToLink(url: string) {
window.open('https://' + url, "_blank");
}
Upvotes: 2
Reputation: 131
you can try binding property whit route
in your component.ts
user:any = 'linkABC'
;
in your component.html
<a target="_blank" href="yourtab/{{user}}">new tab </a>
Upvotes: 1
Reputation: 3766
Some browser may block popup created by window.open(url, "_blank");
.
An alternative is to create a link and click on it.
...
constructor(@Inject(DOCUMENT) private document: Document) {}
...
openNewWindow(): void {
const link = this.document.createElement('a');
link.target = '_blank';
link.href = 'http://www.your-url.com';
link.click();
link.remove();
}
Upvotes: 18
Reputation: 247
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>
and in your Component.ts
openSite(siteUrl) {
window.open("//" + siteUrl, '_blank');
}
Upvotes: 23
Reputation: 42606
I have just discovered an alternative way of opening a new tab with the Router.
On your template,
<a (click)="openNewTab()" >page link</a>
And on your component.ts, you can use serializeUrl to convert the route into a string, which can be used with window.open()
openNewTab() {
const url = this.router.serializeUrl(
this.router.createUrlTree(['/example'])
);
window.open(url, '_blank');
}
Upvotes: 46
Reputation: 1856
Just add target="_blank"
to the
<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
class="theme-btn bg-grey white-text mx-2 mb-2">
Open in New Window
</a>
Upvotes: 37
Reputation: 1366
Try this:
window.open(this.url+'/create-account')
No need to use '_blank'
. window.open
by default opens a link in a new tab.
Upvotes: 5
Reputation: 141
In the app-routing.modules.ts
file:
{
path: 'hero/:id', component: HeroComponent
}
In the component.html
file:
target="_blank" [routerLink]="['/hero', '/sachin']"
Upvotes: 13
Reputation: 3050
just use the full url as href like this:
<a href="https://www.example.com/" target="_blank">page link</a>
Upvotes: 90