ng2-right-click-context-menu

A lightweight, flexible right-click context menu library for Angular, built on top of Angular CDK Overlay. Supports nested submenus, dividers, conditional visibility, custom triggers, and per-item data binding.

Requirements

| Library version | Angular version | |-----------------|-----------------| | 2.x | 20+ | | 1.x | 13 – 19 |

Installation

npm install ng2-right-click-context-menu @angular/cdk

Add the CDK overlay styles to your styles.css:

@import "@angular/cdk/overlay-prebuilt.css";

Setup

Standalone component

import { ShContextMenuModule } from 'ng2-right-click-context-menu';

@Component({
  standalone: true,
  imports: [ShContextMenuModule],
  ...
})
export class AppComponent {}

NgModule

import { ShContextMenuModule } from 'ng2-right-click-context-menu';

@NgModule({
  imports: [ShContextMenuModule],
})
export class AppModule {}

Basic Usage

Template

<!-- Attach the menu to any element -->
<div [shAttachMenu]="myMenu" [shMenuData]="item" *ngFor="let item of items">
  Right-click me
</div>

<!-- Define the menu -->
<sh-context-menu #myMenu>
  <ng-template shContextMenuItem let-item (click)="onEdit($event)">
    <span>Edit</span>
  </ng-template>

  <ng-template shContextMenuItem let-item (click)="onDelete($event)">
    <span>Delete</span>
  </ng-template>
</sh-context-menu>

Component

import { Component } from '@angular/core';
import { ShContextMenuModule } from 'ng2-right-click-context-menu';

@Component({
  standalone: true,
  imports: [ShContextMenuModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  items = [{ label: 'Item 1' }, { label: 'Item 2' }];

  onEdit(event: any) {
    console.log('Edit', event.data);
  }

  onDelete(event: any) {
    console.log('Delete', event.data);
  }
}

Features

Divider

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-item (click)="onCopy($event)">
    <span>Copy</span>
  </ng-template>

  <div shContextMenuItem [divider]="true"></div>

  <ng-template shContextMenuItem let-item (click)="onDelete($event)">
    <span>Delete</span>
  </ng-template>
</sh-context-menu>

Conditional Visibility

Use the [visible] input to show or hide items based on the row data.

<ng-template shContextMenuItem let-item [visible]="canEdit" (click)="onEdit($event)">
  <span>Edit</span>
</ng-template>

canEdit = (event: any) => event.data.editable === true;

Nested Submenus

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-item [subMenu]="colorMenu">
    <span>Change Color</span>
  </ng-template>

  <sh-context-menu #colorMenu>
    <ng-template shContextMenuItem let-item (click)="setColor($event, 'red')">
      <span>Red</span>
    </ng-template>
    <ng-template shContextMenuItem let-item (click)="setColor($event, 'blue')">
      <span>Blue</span>
    </ng-template>
  </sh-context-menu>
</sh-context-menu>

Custom Triggers

By default the menu opens on contextmenu (right-click). Use [shMenuTriggers] to override.

<div [shAttachMenu]="menu" [shMenuTriggers]="['click', 'dblclick']">
  Click or double-click me
</div>

Prevent Open

Use the (open) event to conditionally prevent the menu from opening.

<div [shAttachMenu]="menu" [shMenuData]="item" (open)="onOpen($event)">
  ...
</div>

onOpen(event: ContextOpenEvent) {
  if (event.data.locked) {
    event.preventOpen();
  }
}

[this] Context Binding

Pass the component instance to [this] so that (click) handlers have the correct this context.

<sh-context-menu #menu [this]="thisContext">
  ...
</sh-context-menu>

thisContext = this;

API Reference

ShAttachMenuDirective — [shAttachMenu]

| Input / Output | Type | Description | |--------------------|--------------------------|------------------------------------------------------| | [shAttachMenu] | ShContextMenuComponent | The menu to open | | [shMenuData] | any | Data passed to each menu item as let-item | | [shMenuTriggers] | string[] | DOM events that open the menu (default: right-click) | | (open) | ContextOpenEvent | Emitted before the menu opens; call preventOpen() to cancel |

ShContextMenuComponent — <sh-context-menu>

| Input | Type | Description | |----------|-------|----------------------------------------------------------| | [this] | any | Component instance for (click) handler context |

ShContextMenuItemDirective — shContextMenuItem

| Input / Output | Type | Description | |------------------|-----------------------------------------------|--------------------------------------| | [subMenu] | ShContextMenuComponent | Nested submenu to open on hover | | [divider] | boolean | Renders a divider instead of an item | | [visible] | (event: ShContextMenuClickEvent) => boolean | Controls item visibility | | [disabled] | (event: ShContextMenuClickEvent) => boolean | Controls item disabled state | | [closeOnClick] | boolean (default: true) | Whether clicking closes the menu | | (click) | ShContextMenuClickEvent | Emitted when the item is clicked |

ShContextMenuClickEvent

{
  data: any;         // value passed via [shMenuData]
  event?: MouseEvent;
}

ContextOpenEvent

{
  data: any;
  mouseEvent: MouseEvent;
  preventOpen: () => void;
}

Development

npm start       # run the demo app
npm run build:lib   # build the library

License

MIT © Waqar Naseem