How to open a new tab with router.navigate in TypeScript

Question

The following typescript code will always open in the current browser tab

navigate($data: menuItem, $event: JQueryEventObject) {
       //...
       let a = $event.currentTarget as HTMLAnchorElement;
       router.navigate(a.href);    
    }

How do I make router.navigate open in a new tab ? (that is when $event.ctrlKey is true)

For now I just use: `if ($event.ctrlKey) { window.open(url); }` — Danielle, Jan 09 '17 at 08:44

score 46 · Answer 1 · answered Aug 23 '19 at 19:02

46

this is my solution

const url = this.router.serializeUrl(this.router.createUrlTree(['/my/url/route'], { queryParams: { ...anyQueryParamsYouWantOrOmitThis } }));
window.open(url, '_blank');

answered Aug 23 '19 at 19:02

harmonickey

1,299
2
21
35

Isn't this an Angular answer? – xr280xr Nov 23 '21 at 23:41
Makes sense, to me, anyway. If you type "router.navigate" into Google search, about 98% of the returned matches are about Angular. – StackOverflowUser May 11 '22 at 07:49
Admittedly I didn't see the tags on the question and just assumed they were asking about Angular based on the context of the code. Clearly it's talking about the knockout.js framework called Durandal which uses similar syntax for route navigation, hence my confusion. https://www.infoq.com/articles/durandal-javascript-framework/ – harmonickey May 17 '22 at 20:51

score 20 · Answer 2 · answered Apr 08 '20 at 12:19

20

This one works with # hash (like https://example.com/#/users) and non-hash urls

openInNewTab(router: Router, namedRoute) {
    let newRelativeUrl = router.createUrlTree([namedRoute]);
    let baseUrl = window.location.href.replace(router.url, '');

    window.open(baseUrl + newRelativeUrl, '_blank');
}

answered Apr 08 '20 at 12:19

Kamil Kiełczewski

85,173
29
368
345

Isn't this an Angular answer? – xr280xr Nov 23 '21 at 23:42
@xr280xr I think it is by virtue of Router being an angular class. – SauerTrout Feb 10 '22 at 18:01

score 13 · Accepted Answer · answered Jan 09 '17 at 08:55

13

Yes, as you @Daneille commented, you have to handle by your own way since durandal's router plugin (navigate function) does not provide a way to open a new tab.

So it is better to handle something as you commented.

if ($event.ctrlKey) { 
    window.open(url); 
}

answered Jan 09 '17 at 08:55

Thaadikkaaran

5,088
7
37
59

1

How do I retrieve url from the Router at least? What if somebody changes routes configuration afterwards? – Gherman Nov 16 '17 at 16:23

score 4 · Answer 4 · answered Dec 18 '17 at 16:50

4

I think it is better to do in HTML link like this

<a  style=" text-decoration: none;" [routerLink]="['your-path',param1,param2]" target="_blank"  >your label </a>

answered Dec 18 '17 at 16:50

MNF

687
9
13

score 2 · Answer 5 · edited Mar 07 '22 at 20:14

2

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

edited Mar 07 '22 at 20:14

aaossa

3,763
2
21
34

answered Mar 07 '22 at 13:42

Amir dhib

29
3

score 0 · Answer 6 · answered Jun 22 '22 at 05:54

Use this method as a replacement for router.navigate(...) for a new window:

navigateNewWindow(router: Router, commands: any[]) {
    let baseUrl = window.location.href.replace(router.url, '');
    const url = new URL(commands.join("/"), baseUrl).href
    window.open(url, '_blank');
}

How to open a new tab with router.navigate in TypeScript

6 Answers6

Linked

Related