How to enable right click functionlity having open link in new tab in angular

Question

In angular, I want to navigate to the link on staying at the tab and also should enable right click option showing this popup. When I click directly on link, It should open in same tab and when I click on link pressing ctrl key, It should open in new tab.

<a href='javascript:void(0)' [routerLink]="['/xyz/aaa']" /a>

If I knew the all link parameters, By using above code I could able to acheive but the parameters in link I get it from API. on click of link I have to trigger an API and then I am supposed to navigate.

I tried

<a href='javascript:void(0)' [routerLink]="Navigate(data)" /a>
Navigate(data){
   //get xyz from API

   this.router.navigate(["/xyz/home"]);
}

but API is geting multiple times, once the page loads as routerLink is async

and I tried this as well

<a href='javascript:void(0)' [routerLink]="" (click)="Navigate(data)"/a>
Navigate(data){
   //get xyz from API

   this.router.navigate(["/xyz/home"]);
}

I could able to navigate in same tab, when I click directly but unable to enable right click fuctionality to get this popup (https://i.stack.imgur.com/db7U2.png) (open link in new tab) or ctrl + click as well

Any suggestions are appreciated...!

Answer 1

The routerLink attribute is required in order for the solution I provided to work. The routerLink attribute is used to specify the route to navigate to when the link is clicked.

<a [routerLink]="Navigate(data)"> Link </a>

You can return the URL from the Navigate(data) function.

Navigate(data){
  return ["/xyz/home"]
}