Angular 2 Routing run in new tab

by

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

More Related Contents:

  1. Dynamically add event listener
  2. I get “Http failure response for (unknown url): 0 Unknown Error” instead of actual error message in Angular
  3. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  4. Use component from another module
  5. How to write unit testing for Angular / TypeScript for private methods with Jasmine
  6. Angular and Typescript: Can’t find names – Error: cannot find name
  7. Angular 2 Scroll to top on Route Change
  8. Angular 2 – How do I navigate to another route using this.router.parent.navigate(‘/about’)?
  9. Getting “Uncaught (in promise): TypeError: Object(…) is not a function” Error from Ionic-native VideoEditor Plugin
  10. Typescript/Angular/ES6: can I finally let `hasOwnProperty()` die in for loops?
  11. async/await in Angular `ngOnInit`
  12. How to iterate object keys using *ngFor?
  13. Angular 2 Form “Cannot find control with path”
  14. vs
  15. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  16. Angular 2 Basic Authentication not working
  17. How to smooth scroll to page anchor in angular 4 without plugins properly?
  18. Angular 2 + Ionic 2: Detect if an object was modified
  19. Http.get() working but not working in build(Release/Debug) in Ionic 4
  20. Property ‘json’ does not exist on type ‘Object’
  21. inject() must be called from an injection context
  22. Update parent component property from child component in Angular 2
  23. How to use variable to define templateUrl in Angular2
  24. Behaviour subject initial value null?
  25. How to Using a FormArray in a FormGroup
  26. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  27. How to validate white spaces/empty spaces? [Angular 2]
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment