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)

Answer 1

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

Answer 2

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>

Answer 3

this is my solution

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