Angular 2 Routing run in new tab

Question

I am working with a asp.net core application with angular2 and my routing is working fine.

<a target="target" routerLink="/page1" routerLinkActive="active">Associates</a>  <a routerLink="/page2" routerLinkActive="active">Account managers</a>  

I want to open every page link (routerLink) in a new tab. Is it possible that every link is open in a new tab, without refreshing the page?

I have tried to replace routerLink="/Page2" by target="target" href="/associates" but the page refreshes all the reference.

Answer 1

Try this please, <a target="_blank" routerLink="/Page2">

---

Update1: Custom directives to the rescue! Full code is here: https://github.com/pokearound/angular2-olnw

import { Directive, ElementRef, HostListener, Input, Inject } from '@angular/core';  @Directive({ selector: '[olinw007]' }) export class OpenLinkInNewWindowDirective {     //@Input('olinwLink') link: string; //intro a new attribute, if independent from routerLink     @Input('routerLink') link: string;     constructor(private el: ElementRef, @Inject(Window) private win:Window) {     }     @HostListener('mousedown') onMouseEnter() {         this.win.open(this.link || 'main/default');     } } 

Notice, Window is provided and OpenLinkInNewWindowDirective declared below:

import { AppAboutComponent } from './app.about.component'; import { AppDefaultComponent } from './app.default.component'; import { PageNotFoundComponent } from './app.pnf.component'; import { OpenLinkInNewWindowDirective } from './olinw.directive'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { RouterModule, Routes } from '@angular/router';  import { AppComponent } from './app.component';   const appRoutes: Routes = [   { path: '', pathMatch: 'full', component: AppDefaultComponent },   { path: 'home', component: AppComponent },   { path: 'about', component: AppAboutComponent },   { path: '**', component: PageNotFoundComponent } ];  @NgModule({   declarations: [     AppComponent, AppAboutComponent, AppDefaultComponent, PageNotFoundComponent, OpenLinkInNewWindowDirective   ],   imports: [     BrowserModule,     FormsModule,     HttpModule,     RouterModule.forRoot(appRoutes)   ],   providers: [{ provide: Window, useValue: window }],   bootstrap: [AppComponent] }) export class AppModule { } 

First link opens in new Window, second one will not:

<h1>     {{title}}     <ul>         <li><a routerLink="/main/home" routerLinkActive="active" olinw007> OLNW</a></li>         <li><a routerLink="/main/home" routerLinkActive="active"> OLNW - NOT</a></li>     </ul>     <div style="background-color:#eee;">         <router-outlet></router-outlet>     </div> </h1> 

Tada! ..and you are welcome =)

Update2: As of v2.4.10 <a target="_blank" routerLink="/Page2"> works