CODEWITHSUNDEEP
angularcontextmenu
JavascriptLoser
JavascriptLoser

Reputation: 1962

Angular 2 right click events?

I am building an interactive web application with Angular2 and I am looking for a way to capture right clicks on an angular component. I also need to prevent the browser context menu appearing on a right click so I can display my own custom context menu.

I know that in angular 1, you had to create a custom directive to capture a right click event. Is this still the case in Angular 2, or is it built in/is there an easier way of doing it? I've had a look through some previous SO questions but they do not relate to Angular2.

How can I accomplish capturing right clicks and preventing the browser context menu from appearing in Angular2?

Upvotes: 28

Views: 43759

Answers (1)

Meligy
Meligy

Reputation: 36594

In Angular 2+, you can capture any event like:

<div (anyEventName)="whateverEventHandler($event)">
</div>

Note that $event is optional, and the return of the function is the return of the event handler, so, you can return false; to avoid default browser action from the event.

In your case the event name is contextmenu. So, your code can be something like this:

@Component({
  selector: 'my-app',
  template: `
    <div (contextmenu)="onRightClick($event)">
      Right clicked
      {{nRightClicks}}
      time(s).
    </div>
  `,
  // Just to make things obvious in browser
  styles: [`
    div {
      background: green;
      color: white;
      white-space: pre;
      height: 200px;
      width: 200px;
    }
  `]
})
export class App {
  nRightClicks = 0;

  constructor() {
  }

  onRightClick() {
    this.nRightClicks++;
    return false;
  }
}

Here's a full working example:
http://on.gurustop.net/2E0SD8e

Upvotes: 60

Related Questions