I am working on a project in Angular 6, where I have used (click)="actionNavigateAway()" to direct page to a new Url. This works perfectly fine on the left click. But on the right click, it shows up a context menu having options like Back, Reload, etc (as shown in the 1st photo).

Instead, what I want to show is the default context menu that we usually find on right clicking a link (figure 2). I have searched the web and found ways to make a custom contextmenu, but nothing for the default. Can you please help me with that? Thanks.
Take a look at this
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.
If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element’s contents.
So it's not considered as a hyperlink. Just add an empty href attribute. Like this,
<a (click)="actionNavigateAway()">Not Working</a>
<br/>
<a href="" (click)="actionNavigateAway()">Working</a>
If you need to use JS to route your link, but want the href context menu -you can use both. You can add a blank href or any href, and then pass the event to prevent default on a function. like so
<a href="/somepath" onclick="function(event){event.preventDefault()}">This link has both</a>
Now the page won't try to route you to "/somepath" when you click that href link. You can either add more code to the function, or use a JS SPA router to handle the routing. You now have javascript handling your links, and a normal context menu. Since the context menu has an actual route -it will actually open if and only if you select to open in new tab. not an actual click
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With