A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu. Bootstrap classes are included in the markup, but there is no explicit dependency on bootstrap. Demo
npm install angular2-contextmenu
<ul>
<li *ngFor="item in items" (contextmenu)="onContextMenu($event, item)">Right Click: {{item.name}}</li>
</ul>
<context-menu></context-menu>
import { ContextMenuComponent, ContextMenuService } from 'angular2-contextmenu';
@Component({
directives: [ ContextMenuComponent ],
providers: [ ContextMenuService ],
...
})
export class MyContextMenuClass {
public items = [
{ name: 'John', otherProperty: 'Foo' },
{ name: 'Joe', otherProperty: 'Bar' }
};
constructor(private contextMenuService: ContextMenuService) {}
public onContextMenu($event: Event, item: any): void {
this.contextMenuService.show.next({
actions: [
{
html: () => `Say hi!`,
click: (item) => alert('Hi, ' + item.name)
},
{
html: () => `Something else`,
click: (item) => alert('Or not...')
},
],
event: $event,
item: item,
});
$event.preventDefault();
}
}
Every menu option has an html
function and a click
function.
The enabled
function is optional. If the function returns true, the item is enabled (default). If no function is provided, the item will be enabled by default.
public menuOptions = [
{
html: (): string => {
return 'Something';
},
click: (item, $event): void {
// Action
},
enabled: (item, $event): boolean {
// Enable or Disable
return true; // enabled = true, disabled = false
}
}
];
let customHtml = `<div style="cursor: pointer; background-color: pink">
<i class="glyphicon glyphicon-ok-sign"></i> Testing Custom </div>`;
let customItem = {
html: () => customHtml,
enabled: function() {return true},
click: function (item, $event) {
alert("custom html");
}};
this.customHTMLOptions = [
customItem,
{
html: () => 'Example 1',
click: (item, $event): void {
alert("Example 1");
}
}];