ng2-right-click-menu

ng2-right-click-menu

_Right click context menu for Angular 2+_

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

$3

@angular/cdk

@angular/cdk/overlay-prebuilt.css

$3

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

import ShContextMenuModule

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

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

import css file in your styles.css:

``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.

``html







``

#### 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

`html



`

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).

``html




Menu Item - {{data.label}}

``

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

$3

npm start to run the demo application

develop the library under /lib`