# ng2-right-click-menu

> Right click context menu for Angular

Latest version **1.1.3** (published 2019-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng2-right-click-menu
pnpm add ng2-right-click-menu
yarn add ng2-right-click-menu
bun add ng2-right-click-menu
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2019-10-27 |
| First published | 2017-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 413.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 50 |
| Author | Matan Sar-Shalom |
| Maintainers | msarsha |
| Keywords | angular, angular2, ng2, context, menu, right, click, menu, contextmenu |

## Links

- npm: https://www.npmjs.com/package/ng2-right-click-menu
- Repository: https://github.com/msarsha/ng2-right-click-menu
- Homepage: https://github.com/msarsha/ng2-right-click-menu#readme
- Issues: https://github.com/msarsha/ng2-right-click-menu/issues
- npm.io page: https://npm.io/package/ng2-right-click-menu

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 1.1.3 (latest) — 2019-10-27
- 1.1.2 — 2019-07-20
- 1.1.1 — 2019-03-10
- 1.1.0 — 2019-01-26
- 1.0.1 — 2018-06-15
- 1.0.0 — 2018-04-24
- 0.0.16 — 2017-11-19
- 0.0.15 — 2017-11-05
- 0.0.14 — 2017-09-10
- 0.0.13 — 2017-07-23
- 0.0.12 — 2017-07-08
- 0.0.11 — 2017-04-02
- 0.0.10 — 2017-03-12
- 0.0.9 — 2017-03-08
- 0.0.8 — 2017-02-28
- … 7 more at https://npm.io/package/ng2-right-click-menu/versions

## README

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

````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
<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-template`s with `shContextMenuItem`

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

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

---
_Source: https://npm.io/package/ng2-right-click-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._