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> </div>
</div>

5 Answers

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>

1

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

0

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

window.open(url, '_blank');

3

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 [routerLink]="['/page', id]" target="_blank" queryParamsHandling="merge"
></a>
@ViewChild('link', { static: false }) private link: ElementRef;
this.link.nativeElement.click();

0

Use this in Angular component HTML file

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy