ng2-context-menu
An Angular 2 reusable component that provides Custom Context Menu support.
Snapshot
Prerequisite
* Angular-cli: 1.0.0-beta.18 or higher
* NPM : 4.0.2 or higher
* Node: v6.9.1 or higher
Installation
npm install ng2-context-menu --save oryarn add ng2-context-menu --save
use
Developers can use this module in angular 2 projects as custom context menu support. Steps to use :
Ng2ContextMenuModule
to the module in which your component
is declared.
Add ; @
Context Menu
options in your component .ts
file
Define your You can define your Custom Context Menu
options as shown here. Please, read comments carefully.
;... // contructor function { /* AddContextMenuOptions * ---------------------- * This method accepts an array of Context Menu options. * Each option is just an object having two properties -- `iconPath` and `action`. * `iconPath` is path to the icon. This icon appears as menu option image/icon. * `action` is the just simple text that appears as the name of action. * NOTE: You can provide any valid iconPath. But is advisable to keep your images/icons * in 'assets' folder. */ ContextMenuDataService; /* OnMenuClick * ---------------------- * This method listens every click on Context Menu. This method provides action information * that you have done by clickig on a Context Menu option. */ ContextMenuDataService; }
NOTE: Here, When you click on a Context Menu option, You get action information in OnMenuClick
function
as actionInfo
object. If you log this object, It will have three properties/keys -- information
, action
and targetElementInformation
.
*information
represents the information that you pass to the [context-menu]
directive in your component template
. *action
represents the custom action you clicked like - 'COPY', 'CUT' and 'RENAME' etc.
*targetElementInformation
represents the information of the element on which you are performing your action. You can use targetElementInformation
key to carry out Html DOM changes for that element.
If You pass invalid parameter to AddContextMenuOptions
. You will get an error --
Error: Invalid parameters is passed to "AddContextMenuOptions". Goto docs: ...
[context-menu]
directive to the element on which you want to open context menu in your component template
.
Add <!-- You can apply [context-menu] directive on any valid HTML 5 element --> Right Click Me To Open Context Menu Right Click Me To Open Context Menu Right Click Me To Open Context Menu
Here, You can provide any type of information to [context-menu]
. When, you will click a Context Menu, You can get this information.
<ng2-context-menu></ng2-context-menu>
selector in your template
file.
Add <!-- You can apply [context-menu] directive on any valid HTML 5 element --> Right Click Me To Open Context Menu Right Click Me To Open Context Menu Right Click Me To Open Context Menu
.css
file.
Add the following css to your component
You can customize this css according to your need.