ngx-rightclick is a multi-level, multi-target right-click context menu component for Angular 6+ applications.

context menu in angular, angular context menu example, angular material context menu right click, context menu directive angular, angular context menu event

Custom Multi-Level Context Menu with jQuery and CSS3

How to make use of it:

Install

npm install @ctrl/ngx-rightclick

1. Import and add to NgModule.

import { ContextMenuModule } from '@ctrl/ngx-rightclick';

2. Add a context menu directive to the element and pass the menu component to be displayed.

// show.component.ts
@Component({
  template: `
    <div [contextMenuTrigger]="menu" (menuAction)="handleMenuAction($event)">Right Click</div>
  `,
})
export class ShowComponent {
  // menu component imported and assigned locally
  menu = SimpleMenuComponent;
}

// my-menu.component.ts
import { Component } from '@angular/core';

import { MenuComponent, ContextMenuService, MenuPackage } from '@ctrl/ngx-rightclick';

@Component({
  selector: 'simple-menu',
  // add your menu html
  template: `<a (click)="handleClick()">Download</a>`,
})
export class SimpleMenuComponent extends MenuComponent {
  // this module does not have animations, set lazy false
  lazy = false;

  constructor(public menuPackage: MenuPackage, public contextMenuService: ContextMenuService) {
    super(menuPackage, contextMenuService);
    // grab any required menu context passed via menuContext input
    console.log(menuPackage.context);
  }

  handleClick() {
    // IMPORTANT! tell the menu to close, anything passed in here is given to (menuAction)
    this.contextMenuService.closeAll();
  }
}

3. The last step is to add CSS somewhere in your global styles.

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ngx-contextmenu.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
}

// not required but can help with mobile right click
.target {
  user-select: none;
}

[Inputs]

(Ouput)

Context Menu Service, ngx-rightclick Plugin/Github, angular grid context menu

See Demo And Download

Official Website(scttcper): Click Here

This superior jQuery/javascript plugin is developed by scttcper. For extra Advanced usage, please go to the official website.