Angular 6 routerLink on a new tab

Question

I'm trying to open a routerlink on a new tab instead of on the current page but regular html attributes like target _blank are not working.

<span routerLink="/custompage/{{city.id}}"  class="badge badge-primary badge-pill">open</span>

Answer 1

Here's an alternate way of doing within a component.

openCityInNewWindow(city) {
  // Converts the route into a string that can be used 
  // with the window.open() function
  const url = this.router.serializeUrl(
    this.router.createUrlTree([`/custompage/${city.id}`])
  );

  window.open(url, '_blank');
}

Html will look something like

<ul *ngFor="let city of cities">
  <li (click)="openCityInNewWindow(city.id)">{{city.name}}</li>
</ul>

Answer 2

There is a newer way of opening new tabs using routerLink, but in my opinion, this is still a simpler option, as both methods still require to make use of window.open().

On your component.ts,

openNewTab(url) {
  window.open(url, '_blank');
}

or this on your component.html

<a href="www.domain.com/custompage/{{city.id}}" target="_blank">

Another valid alternative is to write your own custom directives. Check it out over here, that person has already written a sample implementation of it.

Answer 3

you can add target="_blank" to your link

it works for me:

 <a routerLink="/News" routerLinkActive="active" target="_blank" rel="bookmark"></a>

Answer 4

I encountered the exact same issue and i think i've found the best of both worlds.

Change your DIV, SPAN into A tags. Add the href link but keep the routerLink.

<a routerLink="/custompage/{{city.id}}"  href="/custompage/{{city.id}}" class="badge badge-primary badge-pill">open</a>

How it should work now :

• Left click -> go to corresponding route / page without a new reload ;
• Right click -> Open in new tab / window options and would naturally load a new page when using this navigation

Answer 5

I find the solution and fixed this as below

 <a [routerLink]="['/unauth/profile',data.userId]" target="_blank" class="FullViewLink">FullView<i class="fa fa-arrow-right"></i></a>

You can targe="_blank" in routerLink. It is working fine for me.