Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

2.5K
Visualizações
How to open a link in new tab using angular?

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?

over 4 years ago · Santiago Trujillo
10 Respostas
Responde à pergunta

0

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

goToLink(url: string) {
    window.open('https://' + url, "_blank");
}
over 4 years ago · Santiago Trujillo Relatório

0

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();
  }
over 4 years ago · Santiago Trujillo Relatório

0

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>

over 4 years ago · Santiago Trujillo Relatório

0

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

and in your Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}
over 4 years ago · Santiago Trujillo Relatório

0

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');
}
over 4 years ago · Santiago Trujillo Relatório

0

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>
over 4 years ago · Santiago Trujillo Relatório

0

In the app-routing.modules.ts file:

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

In the component.html file:

target="_blank" [routerLink]="['/hero', '/sachin']"
over 4 years ago · Santiago Trujillo Relatório

0

Try this:

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

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

over 4 years ago · Santiago Trujillo Relatório

0

just use the full url as href like this:

<a href="https://www.example.com/" target="_blank">page link</a>
over 4 years ago · Santiago Trujillo Relatório

0

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");
}
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda