How to open new browser tab using router from angular 2 component?

Question

I have a angular 2 component and need to navigate to another route but in different browser tab. Below code is navigating in same browser tab.

    import { Component } from '@angular/core';
    import { Router } from '@angular/router';

    @Component({
         templateUrl: 'quotes-edit.component.html'
    })

    export class QuoteComponent {
         constructor(private router: Router) {
         }

         this.router.navigate(['quote/add']);
    }

Duplicate of http://stackoverflow.com/questions/40760099/how-to-open-new-window-in-new-tab-in-angular2 — zerohero, Dec 29 '16 at 12:43
A different browser tab is a different application. The Angular router doesn't support navigating to another tab. — Günter Zöchbauer, Dec 29 '16 at 12:54
Thanks @GünterZöchbauer. As per answer link in zerohero's comment, i need to use window.open to open new tab. — Nimesh Vaghasiya, Dec 29 '16 at 12:57
I think that is not possible. See this: http://stackoverflow.com/questions/41096375/how-to-navigate-in-angular2-to-new-tab — Avnesh Shakya, Dec 29 '16 at 13:02
Possible duplicate of [Angular 2 Routing run in new tab](https://stackoverflow.com/questions/41355830/angular-2-routing-run-in-new-tab) — Chen Dachao, Jul 26 '17 at 02:15
Possible duplicate of [How to open new window in new tab in angular2](https://stackoverflow.com/questions/40760099/how-to-open-new-window-in-new-tab-in-angular2) — cmaynard, Oct 22 '18 at 19:46

score 1 · Answer 1 · answered Dec 09 '19 at 10:41

Angular applications are SPA(Single Page Application), which means that the Router is nothing else than a Module to mimic the change of a Route which wouldn't be necessary. You can open redirect in another route in another tab like this

  /**
   * Open url in a new tab
   */
  navigateToNewTab(): void {
    // Here you can get the url
    const { protocol, host } = window.location;
    // Or use the router
    // this.router.url

    const path = '...';

    const url = `${protocol}//${host}/${path}`;
    window.open(url,'_blank');
  }

score 0 · Answer 2 · answered Apr 11 '19 at 17:22

0

You wouldn't use the angular router for this but instead, you could make a function that has the following

 openinbrowserclicked(url) {
    window.open(
      'url',
      '_blank',
      'toolbar=no,resizable=yes,scrollbars=yes'
    );
  }

answered Apr 11 '19 at 17:22

Nilesh Kesar

357
2
14

How to open new browser tab using router from angular 2 component?

2 Answers2