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?
Try this:
window.open(this.url+'/create-account')
No need to use '_blank'
. window.open
by default opens a link in a new tab.
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>
just use the full url as href like this:
<a href="https://www.example.com/" target="_blank">page link</a>
Use window.open()
. It's pretty straightforward !
In your component.html
file-
<a (click)="goToLink("www.example.com")">page link</a>
In your component.ts
file-
goToLink(url: string){
window.open(url, "_blank");
}
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');
}
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();
}
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>
and in your Component.ts
openSite(siteUrl) {
window.open("//" + siteUrl, '_blank');
}
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>
In the app-routing.modules.ts
file:
{
path: 'hero/:id', component: HeroComponent
}
In the component.html
file:
target="_blank" [routerLink]="['/hero', '/sachin']"
Source: Stackoverflow.com