- Notifications
You must be signed in to change notification settings - Fork25
-Deprecated in favor of ngx-contextmenu- A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.
License
isaacplmann/angular2-contextmenu
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Deprecated - usengx-contextmenu instead
This library is being moved tongx-contextmenu. With the name change comes support for Angular 4 and removal of the old imperative syntax.
A context menu built with Angular 2 inspired byui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap.Demo
npm install angular2-contextmenu- import ContextMenuModule into your app module
With version 0.2.0, there is a new declarative syntax that allows for quite a bit more flexibility and keeps html out of configuration objects.The older syntax is deprecated and will be removed in version 1.x. (I have no timeline on when I'll release 1.x, but wanted to give everyone advance warning.)
<ul><li*ngFor="let item of items"[contextMenu]="basicMenu"[contextMenuSubject]="item">Right Click: {{item?.name}}</li></ul><context-menu><templatecontextMenuItem(execute)="showMessage('Hi, ' + $event.item.name)"> Say hi!</template><templatecontextMenuItemdivider="true"></template><templatecontextMenuItemlet-item(execute)="showMessage($event.item.name + ' said: ' + $event.item.otherProperty)"> Bye, {{item?.name}}</template><templatecontextMenuItempassive="true"> Input something:<inputtype="text"></template></context-menu>
@Component({ ...})exportclassMyContextMenuClass{publicitems=[{name:'John',otherProperty:'Foo'},{name:'Joe',otherProperty:'Bar'}]; @ViewChild(ContextMenuComponent)publicbasicMenu:ContextMenuComponent;}
- Each context menu item is a
<template>element with thecontextMenuItemattribute directive applied. - If the
itemobject is used in the context menu item template, thelet-itemattribute must be applied to the<template>element.** Note: ** Make sure to use theitem?.propertysyntax in the template rather thanitem.propertyas the item will be initiallyundefined. - Every context menu item emits
executeevents. The$eventobject is of the form{ event: MouseEvent, item: any }whereeventis the mouse click eventthat triggered the execution anditemis the current item. - The
dividerinput parameter is optional. Items default to normal menu items. Ifdivideristrue, all the other inputs are ignored. - The
passiveinput parameter is optional. Ifpassiveistrue, the menu item will not emit execute events or closethe context menu when clicked. - The
enabledinput parameter is optional. Items are enabled by default.This can be a boolean value or a function definition that takes an item and returns a boolean. - The
visibleinput parameter is optional. Items are visible by default. This property enables you to show certain context menu items based on what the data item is.This can be a boolean value or a function definition that takes an item and returns a boolean. - Within the template, you have access to any components and variables available in the outer context.
<context-menu><templatecontextMenuItemlet-item[visible]="isMenuItemType1"[enabled]="false"(execute)="showMessage('Hi, ' + $event.item.name)"> Say hi, {{item?.name}}!<my-component[attribute]="item"></my-component> With access to the outside context: {{ outsideValue }}</template></context-menu>
publicoutsideValue="something";publicisMenuItemType1(item:any):boolean{returnitem.type==='type1';}
If you need access to properties in your component from within theenabled orvisible functions, you'll need to pass in a version of the function withthis bound to your component.
<template...[visible]="isMenuItemOutsideValueBound">
publicoutsideValue="something";publicisMenuItemOutsideValueBound=this.isMenuItemOutsideValue.bind(this);publicisMenuItemOutsideValue(item:any):boolean{returnitem.type===this.outsideValue;}
You can use multiple context menus in the same component if you would like.
<ul><li*ngFor="let item of items"[contextMenu]="basicMenu"[contextMenuSubject]="item">{{item?.name}}</li></ul><context-menu#basicMenu> ...</context-menu><ul><li*ngFor="let item of items"[contextMenu]="otherMenu"[contextMenuSubject]="item">{{item?.name}}</li></ul><context-menu#otherMenu> ...</context-menu>
@ViewChild('basicMenu')public basicMenu:ContextMenuComponent;@ViewChild('otherMenu')public otherMenu:ContextMenuComponent;
If your<context-menu> component is in a different component from your list, you'll need to wire up the context menu event yourself.
<ul><li*ngFor="let item of items"(contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li></ul>
import{ContextMenuService}from'angular2-contextmenu';@Component({ ...})exportclassMyContextMenuClass{publicitems=[{name:'John',otherProperty:'Foo'},{name:'Joe',otherProperty:'Bar'}];// Optional @Input()contextMenu:ContextMenuComponent;constructor(privatecontextMenuService:ContextMenuService){}publiconContextMenu($event:MouseEvent,item:any):void{this.contextMenuService.show.next({// Optional - if unspecified, all context menu components will opencontextMenu:this.contextMenu,event:$event,item:item,});$event.preventDefault();$event.stopPropagation();}}
The context menu can be triggered at any point using the method above. For instance, to trigger the context menuwith a left click instead of a right click, use this html:
<ul><li*ngFor="let item of items"(click)="onContextMenu($event, item)">Left Click: {{item.name}}</li></ul>
This could be(keydown),(mouseover), or(myCustomEvent) as well.
The html that is generated for the context menu looks like this:
<divclass="dropdown angular2-contextmenu"><ulclass="dropdown-menu"><li><a><!-- the template for each context menu item goes here --></a><span><!-- the template for each passive context menu item goes here --></span></li></ul></div>
You can key off of theangular2-contextmenu class to create your own styles. Note that theul.dropdown-menu will have inline styles applied forposition,display,left andtop so that it will be positioned at the cursor when you right-click.
.angular2-contextmenu .dropdown-menu {border: solid1px chartreuse;background-color: darkgreen;padding:0;}.angular2-contextmenuli {display: block;border-top: solid1px chartreuse;text-transform: uppercase;text-align: center;}.angular2-contextmenuli:first-child {border-top:none;}.angular2-contextmenua {color:chartreuse;display: block;padding:0.5em1em;}.angular2-contextmenua:hover {color:darkgreen;background-color:chartreuse;}
If you're using Bootstrap 4, you can specify auseBootstrap4 property in theforRoot function of theContextMenuModule in order to get the appropriate class names. Like this:
@NgModule({import:[ContextMenuModule.forRoot({useBootstrap4:true,}),],})exportclassAppModule{}
Or, if you want to repeat yourself, you can add auseBootstrap4 attribute to eachcontext-menu component. Like this:
<context-menu[useBootstrap4]="true"></context-menu>
There is a(close) output EventEmitter that you can subscribe to for notifications when the context menu closes (either by clicking outside or choosing a menu item).
<context-menu(close)="processContextMenuCloseEvent()"></context-menu>
The context menu will correctly position itself as long as the<context-menu> element does not have a parent element that has a complex transform applied to it. Complex in this case means anything besides a simple 2d translation. So rotate, skew, stretch, scale, z-axis translation will all cause the context menu to appear in unexpected places. The common scenario of rendering an element withtransform: translate3d(0px 0px 0px) in order to trigger the browser's GPU works just fine.
This alternate, deprecated syntax will continue working until version 1.x.
<ul><li*ngFor="let item of items"(contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li></ul><context-menu></context-menu>
import{ContextMenuService}from'angular2-contextmenu';@Component({ ...})exportclassMyContextMenuClass{publicitems=[{name:'John',otherProperty:'Foo'},{name:'Joe',otherProperty:'Bar'}];constructor(privatecontextMenuService:ContextMenuService){}publiconContextMenu($event:MouseEvent,item:any):void{this.contextMenuService.show.next({actions:[{html:(item)=>`Say hi!`,click:(item)=>alert('Hi, '+item.name)},{html:(item)=>`Something else`,click:(item)=>alert('Or not...')},],event:$event,item:item,});$event.preventDefault();$event.stopPropagation();}}
About
-Deprecated in favor of ngx-contextmenu- A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.