Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/msarsha/ng2-right-click-menu
Right click context menu for Angular 2+
https://github.com/msarsha/ng2-right-click-menu
angular angular2 angular2-directive context-menu contextmenu right-click
Last synced: 2 months ago
JSON representation
Right click context menu for Angular 2+
- Host: GitHub
- URL: https://github.com/msarsha/ng2-right-click-menu
- Owner: msarsha
- Created: 2017-02-27T11:42:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:48:34.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T17:40:58.969Z (2 months ago)
- Topics: angular, angular2, angular2-directive, context-menu, contextmenu, right-click
- Language: TypeScript
- Homepage: https://msarsha.github.io/ng2-right-click-menu/
- Size: 5.22 MB
- Stars: 50
- Watchers: 6
- Forks: 21
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
- awesome-angular - ng2-right-click-menu - Right click context menu for Angular 2+. (Uncategorized / Uncategorized)
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
Menu Item - {{data.label}}
````
#### 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
Right Click Me
```
## 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}}
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
### Setting up development env
`npm start` to run the demo application
develop the library under `/lib`