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>
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>
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');
}
}
Angular doesn't support navigating to a new tab , you can use window.open to do this
window.open(url, '_blank');
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();
Use this in Angular component HTML file
<a class="btn btn-primary" target="_blank" routerLink="/create-playlist" > Create Playlist </a>
