Angular 2 Routing navigate run in new tab(Use Angular Router naviagte )

Question

How to open a new browser Tab , if using router.navigate .

this.router.navigate([]).then(result => { window.location.href = link; });

Possible duplicate of [Angular 2 Routing run in new tab](https://stackoverflow.com/questions/41355830/angular-2-routing-run-in-new-tab) — Smokey Dawson, May 25 '18 at 04:21

score 55 · Accepted Answer · answered May 25 '18 at 04:22

55

Try this one.

this.router.navigate([]).then(result => {  window.open(link, '_blank'); });

answered May 25 '18 at 04:22

Manish Vadher

1,416
14
14

8

Why not `window.open(link, '_blank');` Direclty ? – Shereef Marzouk Dec 16 '19 at 18:32
this.router.navigate([]).then(result => { window.open(link, '_blank'); }); worked for me. Thanks. – Rajkumar M Nov 28 '20 at 09:26
This changes the current page's link and opens the same page in new tab. Whereas I want to keep the current page's URL intact and router.navigate should open a new tab. – RDV Jan 20 '21 at 21:56
Without `_blank` it worked for me `this.router.navigate([]).then(result => { window.open(link); }` – Ankur Raiyani May 11 '22 at 06:47

score 6 · Answer 2 · answered May 25 '18 at 04:26

6

currently i believe angular doesn't offer any method or service to do that so i've to use window object to open links in a new tab window.open(link, '_blank')

answered May 25 '18 at 04:26

mkamranhamid

495
3
15

score 2 · Answer 3 · answered Apr 22 '20 at 09:08

2

this will open in new tab :

 this._router.navigate([]).then(result => {  window.open( `/customer/edit/${customer_id_param}`, '_blank'); });

answered Apr 22 '20 at 09:08

Saurabh Mistry

11,077
4
41
64

score 2 · Answer 4 · answered Jul 19 '21 at 22:00

To navigate to a new tab, instead of calling navigate directly:

this.router.navigate(routerCommands, { queryParams });

Use createUrlTree and serializeUrl, so you can build your URL with the same parameters used in navigate() but without navigating the current tab (only the new one):

 const link = this.router.serializeUrl(this.router.createUrlTree(routerCommands, { queryParams }));
 window.open(link, '_blank');

score -1 · Answer 5 · answered Feb 10 '20 at 10:31

-1

window.open(window.location.href+"/yourRoute", '_blank');

answered Feb 10 '20 at 10:31

amato rahman

1
5

score -3 · Answer 6 · answered Nov 05 '20 at 03:11

-3

Esto deberia funcionar tambien en angular:

  abrirVentana() {
var URL = 'https://stackoverflow.com/';
window.open(URL, '_blank');

}

answered Nov 05 '20 at 03:11

Carlos Javier Bazan Human

155
1
4

You are calling external url using window.open(). The question is about opening the router link in a new tab. – Nikhil May 02 '22 at 11:53

Angular 2 Routing navigate run in new tab(Use Angular Router naviagte )

6 Answers6

Linked