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.

People are posting comment as a answer just for 50 rep, rep race is never gonna end here :D — Abhishek Pandey
– Abhishek Pandey, Commented Jul 18, 2019 at 7:13
@javan.rajpopat Those are different context menus because the source of the context menus are different elements, in second image it says open a link in new tab, because it's a link, you cannot open div into a new tab can you? and for customizing default context menu, for some security reasons browsers does not allow you to do so. — Abhishek Pandey
– Abhishek Pandey, Commented Jul 18, 2019 at 7:18

bahadrdsr · Accepted Answer · 2019-07-17 18:43:46Z

3

+25

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>

answered Jul 17, 2019 at 18:43

bahadrdsr

4743 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SeanMC · Accepted Answer · 2019-07-17 18:52:05Z

1

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

answered Jul 17, 2019 at 18:52

SeanMC

2,4352 gold badges30 silver badges37 bronze badges

Comments

Q.Rey · Accepted Answer · 2019-07-15 13:33:06Z

0

The default context menu is normally working on link, it's normal that nobody tried to reproduce it ^^

In your case, the only possible problem is that you're not aiming correctly the link

But you can also create a custom contextmenu like this : Angular 2: Implement a custom context menu

answered Jul 15, 2019 at 13:33

Q.Rey

7538 silver badges20 bronze badges

Comments

Martijn Vissers · Accepted Answer · 2019-07-15 13:36:27Z

0

The context menu should work when right clicking a link with a href attribute.

<a>This is a A tag without attributes</a><br>
<a href="#">This A tag has a href attribute</a><br>
<a onclick="hi()">This A tag has a onclick attribute</a><br>

So that means that you should use the href attribute instead of a click handler.

Try and run the snippet and right click on the different 'links' to see what I mean.

answered Jul 15, 2019 at 13:36

Martijn Vissers

7921 gold badge6 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular6 Default ContextMenu

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related