45

In Angular is there a way to catch right click events? I see (click) and (dblclick), but when I try (rightclick) it does not trigger any events. Is there a way to include right click events and have them be handled by a function similar to the click and dblclick if it does not exist?

Narm
  • 9,441
  • 5
  • 39
  • 52
Rolando
  • 51,528
  • 92
  • 250
  • 377
  • 2
    see this link https://stackblitz.com/edit/angular-bjy6zb?embed=1&file=app/app.component.ts&hideExplorer=1&hideNavigation=1 – SEY_91 Apr 02 '18 at 23:10
  • Possible duplicate of [Angular 2 right click events?](https://stackoverflow.com/questions/41670017/angular-2-right-click-events) – Narm Apr 03 '18 at 02:22

2 Answers2

79

The event name is contextmenu. So, your html template code can be something like this:

<div (contextmenu)="onRightClick($event)"></div>

$event is an optional parameter so your template and event handler can look like this:

<div (contextmenu)="onRightClick()"></div>

onRightClick() {
    return false;
}

NOTE: You can return false; to avoid default browser action from the event.

Zzz
  • 2,807
  • 5
  • 34
  • 57
9

The event name is "contextmenu", so you should use something like this:

<button (contextmenu)="onRightClick($event)"> Right click me </button>

Then the onRightClick function should look something like this:

onRightClick(event) {
 event.preventDefault() //this will disable default action of the context menu
 //there will be your code for the expected right click action
}
vnapastiuk
  • 374
  • 3
  • 7