Skip to content

msarsha/ng2-right-click-menu

Folders and files

NameName
Last commit message
Last commit date
Aug 22, 2020
Jan 26, 2019
Jan 26, 2019
Oct 27, 2019
Apr 29, 2018
Feb 3, 2019
Jan 28, 2019
Oct 27, 2019
Feb 3, 2019
Jan 26, 2019
Feb 3, 2019
Jan 26, 2019

Repository files navigation

ng2-right-click-menu

Right click context menu for Angular 2+

DEMO https://msarsha.github.io/ng2-right-click-menu/

Dependencies

@angular/cdk

@angular/cdk/overlay-prebuilt.css

Setup

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

import ShContextMenuModule

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

@NgModule({
  //...
  imports: [ShContextMenuModule]
  //...
})

import css file in your styles.css:

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

Usage

Defining a Basic Menu Template

The menu template is built using the sh-context-menu component as the menu wrapper, and nested ng-template with the shContextMenuItem directive for every menu item:

The shContextMenuItem directive provide a template variable (let-data) that gives you access to the data object attached to the menu.

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-data (click)="onClick($event)">
    <div>
      Menu Item - {{data.label}}
    </div>
  </ng-template>
</sh-context-menu>

Attaching Menu To An Element

Attaching works by using the shAttachMenu directive and providing the #menu (from the above example) template variable:

The object provided to the [shMenuData] input will be available as a template variable inside ng-templates with shContextMenuItem

<div [shAttachMenu]="menu" [shMenuData]="data">Right Click Me</div>

Sub Menus

Sub menu is attached to the shContextMenuItem directive using the [subMenu] input.

The [subMenu] input is provided with a sh-context-menu's template variable (just like attaching a menu to an element).

<sh-context-menu #menu>
  <ng-template shContextMenuItem let-data [subMenu]="#nestedMenu">
    <div>
      Menu Item - {{data.label}}
    </div>
  </ng-template>
  <sh-context-menu #nestedMenu>
    <ng-template shContextMenuItem let-data>
      <div>
        Menu Item - {{data.label}}
      </div>
    </ng-template>
  </sh-context-menu>
</sh-context-menu>

API

sh-context-menu (component)

Name Type Default Description
[this] any null the this context for input callbacks (visible) - typically the menu's host component

shContextMenuItem (directive)

Name Type Default Description
[subMenu] ShContextMenuComponent null sub menu
[divider] boolean false render a divider
[closeOnClick] boolean true should the menu close on click
[visible] (event: ShContextMenuClickEvent) => boolean null function to determine if a item is visible
(click) (event: ShContextMenuClickEvent) => void null click handler

shAttachMenu (directive)

Name Type Default Description
[shAttachMenu] ShContextMenuComponent null the menu that will be attached to the element
[shMenuTriggers] string[] null list of event names that will trigger the menu
[shMenuData] any null the data object that will be injected to the menu item's template

Setting up development env

npm start to run the demo application

develop the library under /lib