Angular - Add target to router navigate

Question

What I want to do is to open the target of router navigate in another tab or in a popup. My instruction is this:

private router: Router;
this.router.navigate(['/page', id]);

In routing I have:

 const routes: Routes = [
{
    path: '',
    component: LayoutComponent,
    children: [
        { path: 'page', loadChildren: './page/page.module#PageModule' }
    ]
}
];

I would like to open this link in another tab or in popup window. What can I do?

this is the code of page.ts

@Component({
 selector: 'app-etichetta',
 templateUrl: './page.component.html',
 styleUrls: ['./page.component.scss'],
 animations: [routerTransition()]
})
export class PageComponent implements OnInit {


 constructor(private router: Router,
    private route: ActivatedRoute,
    public appService: AppService) {
 }


 ngOnInit() {

 }
}

and this is the html:

<div [@routerTransition]>
  <br>
  <div class="row">

  </div>
</div>

Pankaj Parkar · Answer 1 · 2020-10-01T17:17:16.017

27

To redirect manually you should first create an URL where to redirect using createUrlTree method, and then redirect.

const url = this.router.createUrlTree(['/page', id])
window.open(url.toString(), '_blank')

Declarative navigation should work.

<a target="_blank" [routerLink]="['/page', id]">
  Link
</a>

edited Oct 01 '20 at 17:17

answered Dec 02 '18 at 12:25

Pankaj Parkar

134,766
23
234
299

thanks but I don't have a a element, I have to do this in .ts – Martina Dec 02 '18 at 12:26

Lional J · Answer 2 · 2021-04-26T09:09:09.887

import { Location } from '@angular/common';
import { Router } from '@angular/router';

export class YourComponent {

   constructor(private router: Router){}

   openNewTab (){
           const host: string =  location.origin;
           const url: string = host + '/#/' + String(this.router.createUrlTree(['/main/product'], { queryParams: { key: encryptData } }));
           window.open(url, '_blank');

   }
}

score 1 · Answer 3 · answered Dec 02 '18 at 12:24

1

Angular doesn't support navigating to a new tab , you can use window.open to do this

window.open(url, '_blank');

answered Dec 02 '18 at 12:24

Sajeetharan

216,225
63
350
396

2

thanks, but I tried this and the link opens on a new tab correctly (localhost/page) but after 1 sec it redirect to localhost – Martina Dec 02 '18 at 12:30
there should be a redirect logic in your ts, check for it – Sajeetharan Dec 02 '18 at 12:32
@Martina I had the same issue with redirecting. Turns out I had the route slightly wrong. – cvb Mar 18 '20 at 17:27

score 1 · Answer 4 · edited Mar 02 '22 at 09:26

1

Use this in Angular component HTML file

<a class="btn btn-primary" target="_blank" routerLink="/create-playlist" > Create Playlist </a>

edited Mar 02 '22 at 09:26

David Buck

3,752
35
31
35

answered Nov 24 '20 at 11:57

Hrishikesh Baidya

513
4
7

cibin · Answer 5 · 2021-02-09T15:08:12.400

The router doesn't have an option to open the link in a new tab. That said, there is a workaround – you can use target="_blank" of a hidden link in your template, reference it and click it:

<a #link
  style="visibility: hidden; display: none;" 
  [routerLink]="['/page', id]"
  target="_blank"
  queryParamsHandling="merge"
></a>

@ViewChild('link', { static: false }) private link: ElementRef;

this.link.nativeElement.click();

Angular - Add target to router navigate

5 Answers5