If you want display your own customized context menu on right mouse click, this program will help you.
Source Code            DEMO

Disable Context Menu

Whenever user right click on HTML document, The browser will show one default menu. We have to disable this first to display your own menu. You can do this by using below code.
<body oncontextmenu="return false">

Design  Your Own Context Menu

Design a DIV with absolute position and limited width. Find the following basic design.
.rightClickPanel {
  width:200px;
  padding:20px;
  position:absolute;
  border:1px solid #ccc;
  background:#ccc;
  display:none;
}

Markup 

Whenever user clicks on the div, detectRightMouseClick will  be called. This function will detect right mouse click, and displays context menu exactly at that location. clickOutside is the directive which detects outside click of the context menu, so we can close it.
<div (mouseup)="detectRightMouseClick($event)" style="border:1px solid #ccc;padding:15px;width:100%">
    Right Mouse click here
</div>
<div class="rightClickPanel" [ngStyle]="rightPanelStyle" (clickOutside)="closeContextMenu()">
    My right panel
</div>

Set Style to Context Menu based on Mouse Position

  1. $event.which - Key code of event ( 3 for right mouse click )
  2. $event.clientX - X coordinate of mouse click
  3. $event.clientY - Y coordinate of mouse click

Script 

Observe detectRightMouseClick fucntion
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <div (mouseup)="detectRightMouseClick($event)" style="border:1px solid #ccc;padding:15px;width:100%">
    Right Mouse click here
    </div>
    <div class="rightClickPanel" [ngStyle]="rightPanelStyle" (clickOutside)="closeContextMenu()">
    My right panel
    </div>
  `
})
export class AppComponent {
  rightPanelStyle: Object = {};
  
  detectRightMouseClick($event) {
       if($event.which === 3) {
            this.rightPanelStyle = {'display':'block','left':$event.clientX + 'px','top':$event.clientY + 'px'};
            return false;
       }
  }

  closeContextMenu() {
      this.rightPanelStyle = {'display':'none'};
  }
}

clickOutSide directive

This directive is for detecting click outside of the context menu
import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private _elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this._elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

4 comments:

  1. When i right click i am getting default browser's options, how can we disable them ?

    ReplyDelete
  2. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. cosas originales para regalar

    ReplyDelete
  3. It's incredibly an amazing and key bit of information.I'm in remarkable spirits that you in a general sense offered this confounding information to us.Click Here

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts