How to open a link in new tab using angular?

Question

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?

Canescent

This works for me <a href="//example.com" target="_blank">page link</a> – Impede

You could just use <a [href]="'www.example.com'" target="_blank">Link</a> – Vedi

Answer 1

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");
}

Arum

Can someone point out a way of doing this where the string within the goToLink function isn't a 'magic string'? For instance, through a variable? – Hedgehog

@BrianAllanWest I would just set a variable in the corresponding component file and leave the parameter out in the html. If this doesn't work, just bind it to the template using the default binding property [ ] and then you can run whatever logic you want on that. .html goToLink() .ts goToLink() { window.open(Your Variable Here, "_blank") } – Gwenore

How can I let it be in a small popup window, and listen to changes in its URL. – Bothersome

I would add a href='', so it stills looks clickable – Tinsley

May use without _blank. By default, a new tab opens. – Delectate

Answer 2

just use the full url as href like this:

<a href="https://www.example.com/" target="_blank">page link</a>

Irkutsk

this is the simplest way. – Nerta

Appreciate this answer. Clean and simple. – Interjection

Answer 3

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');
}

Cowpuncher

Very nice and handy in some cases. Just what I needed. – Charlyncharm

where do you get the router in this.router from? Like what is the import for router? Or is it angular core? – Hertfordshire

@Hertfordshire Import it like this import { Router } from "@angular/router"; – Roadside

Answer 4

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>

Pustulant

Literally just this, best answer – Luminiferous

Answer 5

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

and in your Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

Pacificism

If using "//" + siteUrl then https:// or http:// should be committed in the siteUrl, maybe that was causing the issue for you @Nicolas – Antiquarian

Here is other example bassed in your code. downloadFile(){ const filePath = 'assets/files'; const fileName = '/myfile.xlsx'; const url = ${filePath}${fileName}; window.open(url, '_blank'); } – Slight

From an accessibility standpoint should never have to add click to <a> tag, <a> should ALWAYS have an href attribute, buttons and links are not the same, both can be completely styled with CSS since IE9 which has long been retired... it's 2021 people – Laruelarum

Answer 6

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();
  }

Orelia

best answer. Safe and clean – Doorsill

Answer 7

In the app-routing.modules.ts file:

{
    path: 'hero/:id', component: HeroComponent
}

In the component.html file:

target="_blank" [routerLink]="['/hero', '/sachin']"

Marinara

Answer 8

Try this:

 window.open(this.url+'/create-account')

No need to use '_blank'. window.open by default opens a link in a new tab.

Meri

Why should he try that? What does that do? – Cobbler

this is the answer of this question "How to open link in new tab in angular 5" window.open by default open link in new tab – Meri

Answer 9

u can add https in your code and it works for me

goToLink(url: string) {
    window.open('https://' + url, "_blank");
}

Theis

Answer 10

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');
  }
}

      

Disoblige

Answer 11

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>

Mercy