Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @ctrl/ngx-rightclick with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/cdk/package.json"); // @angular/cdk is a peer dependency. var ngxRightclick = require("@ctrl/ngx-rightclick")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@ctrl/ngx-rightclick v4.0.0

GitHub Buttons for Angular. Star, Like, Follow and more


npm CircleCI

Context Menu Service for Angular



if you don't already have @angular/cdk that needs to be installed too

npm install @ctrl/ngx-rightclick


Latest version available for each version of Angular

current>= 10.x


Import and Add to NgModule

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

Add context menu directive to element and pass the menu component to be shown. Important the menu component must also be added as to entryComponents in your NgModule. See here

// show.component.ts
  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';

  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

  handleClick() {
    // IMPORTANT! tell the menu to close, anything passed in here is given to (menuAction)

Last step 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;


contextMenuTrigger / contextSubmenuTriggercomponentthe menu or submenu to be shown
menuContextanypassed to the menu component via MenuPackage
holdToDisplaynumberdefault: 1000 ms pressing down on mobile to show menu


menuActionanywhatever is passed to ContextMenuService.closeAll
menuClosevoidtriggered whenever a menu or submenu is closed


Use the contextSubmenuTrigger directive as you would the contextMenuTrigger inside your menu.

Other Options

Find the Angular Component of your dreams on



GitHub @scttcper  ·  Twitter @scttcper

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free