CODEWITHSUNDEEP
angulartypescriptangular2-routing
Nimesh Vaghasiya
Nimesh Vaghasiya

Reputation: 977

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

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']);
    }

Upvotes: 14

Views: 9587

Answers (2)

Ling Vu
Ling Vu

Reputation: 5181

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');
  }

Upvotes: 1

Nilesh Kesar
Nilesh Kesar

Reputation: 407

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'
    );
  }

Upvotes: 0

Related Questions