Angular6 Default ContextMenu

Question

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.

Answer 1

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>

Answer 2

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