{"id":13480908,"url":"https://github.com/isaacplmann/angular2-contextmenu","last_synced_at":"2025-09-05T12:47:28.813Z","repository":{"id":57179513,"uuid":"59597621","full_name":"isaacplmann/angular2-contextmenu","owner":"isaacplmann","description":"-Deprecated in favor of ngx-contextmenu- A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.","archived":false,"fork":false,"pushed_at":"2017-09-11T21:34:32.000Z","size":796,"stargazers_count":66,"open_issues_count":2,"forks_count":25,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-10-29T23:13:35.631Z","etag":null,"topics":["angular","contextmenu","ngx"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/isaacplmann.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-24T18:19:08.000Z","updated_at":"2023-08-21T11:24:49.000Z","dependencies_parsed_at":"2022-09-14T02:10:34.115Z","dependency_job_id":null,"html_url":"https://github.com/isaacplmann/angular2-contextmenu","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacplmann%2Fangular2-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacplmann%2Fangular2-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacplmann%2Fangular2-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/isaacplmann%2Fangular2-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/isaacplmann","download_url":"https://codeload.github.com/isaacplmann/angular2-contextmenu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224170400,"owners_count":17267570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","contextmenu","ngx"],"created_at":"2024-07-31T17:00:46.452Z","updated_at":"2024-11-12T16:03:11.268Z","avatar_url":"https://github.com/isaacplmann.png","language":"TypeScript","readme":"# Deprecated - use [ngx-contextmenu](https://github.com/isaacplmann/ngx-contextmenu) instead\n\n# angular2-contextmenu\n\n**This library is being moved to [ngx-contextmenu](https://github.com/isaacplmann/ngx-contextmenu).  With the name change comes support for Angular 4 and removal of the old imperative syntax.**\n\nA context menu built with Angular 2 inspired by [ui.bootstrap.contextMenu](https://github.com/Templarian/ui.bootstrap.contextMenu).  Bootstrap classes are included in the markup, but there is no explicit dependency on Bootstrap. [Demo](http://plnkr.co/edit/wpJXpEh4zNZ4uCxTURx2?p=preview)\n\n## Installation\n\n- `npm install angular2-contextmenu`\n- import ContextMenuModule into your app module\n\n## Usage\n\n### Declarative vs. Imperative\n\nWith 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.\nThe 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.)\n\n### Template\n\n```html\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" [contextMenu]=\"basicMenu\" [contextMenuSubject]=\"item\"\u003eRight Click: {{item?.name}}\u003c/li\u003e\n\u003c/ul\u003e\n\u003ccontext-menu\u003e\n  \u003ctemplate contextMenuItem (execute)=\"showMessage('Hi, ' + $event.item.name)\"\u003e\n    Say hi!\n  \u003c/template\u003e\n  \u003ctemplate contextMenuItem divider=\"true\"\u003e\u003c/template\u003e\n  \u003ctemplate contextMenuItem let-item (execute)=\"showMessage($event.item.name + ' said: ' + $event.item.otherProperty)\"\u003e\n    Bye, {{item?.name}}\n  \u003c/template\u003e\n  \u003ctemplate contextMenuItem passive=\"true\"\u003e\n    Input something: \u003cinput type=\"text\"\u003e\n  \u003c/template\u003e\n\u003c/context-menu\u003e\n```\n\n### Component Code\n\n```js\n@Component({\n  ...\n})\nexport class MyContextMenuClass {\n  public items = [\n      { name: 'John', otherProperty: 'Foo' },\n      { name: 'Joe', otherProperty: 'Bar' }\n  ];\n  @ViewChild(ContextMenuComponent) public basicMenu: ContextMenuComponent;\n}\n```\n\n## Context Menu Items\n\n- Each context menu item is a `\u003ctemplate\u003e` element with the `contextMenuItem` attribute directive applied.\n- If the `item` object is used in the context menu item template, the `let-item` attribute must be applied to the `\u003ctemplate\u003e` element. \n  ** Note: ** Make sure to use the `item?.property` syntax in the template rather than `item.property` as the item will be initially `undefined`.\n- Every context menu item emits `execute` events. The `$event` object is of the form `{ event: MouseEvent, item: any }` where `event` is the mouse click event\n  that triggered the execution and `item` is the current item.\n- The `divider` input parameter is optional.  Items default to normal menu items.  If `divider` is `true`, all the other inputs are ignored.\n- The `passive` input parameter is optional.  If `passive` is `true`, the menu item will not emit execute events or close\n  the context menu when clicked.\n- The `enabled` input parameter is optional.  Items are enabled by default.\n  This can be a boolean value or a function definition that takes an item and returns a boolean.\n- The `visible` input 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.\n  This can be a boolean value or a function definition that takes an item and returns a boolean.\n- Within the template, you have access to any components and variables available in the outer context.\n\n```html\n\u003ccontext-menu\u003e\n  \u003ctemplate contextMenuItem let-item [visible]=\"isMenuItemType1\" [enabled]=\"false\" (execute)=\"showMessage('Hi, ' + $event.item.name)\"\u003e\n    Say hi, {{item?.name}}!  \u003cmy-component [attribute]=\"item\"\u003e\u003c/my-component\u003e\n    With access to the outside context: {{ outsideValue }}\n  \u003c/template\u003e\n\u003c/context-menu\u003e\n```\n```js\npublic outsideValue = \"something\";\npublic isMenuItemType1(item: any): boolean {\n  return item.type === 'type1';\n}\n```\n\n## Binding `this` for `visible` and `enabled` functions\n\nIf you need access to properties in your component from within the `enabled` or `visible` functions, you'll need to pass in a version of the function with `this` bound to your component.\n\n```html\n\u003ctemplate ... [visible]=\"isMenuItemOutsideValueBound\"\u003e\n```\n```js\npublic outsideValue = \"something\";\npublic isMenuItemOutsideValueBound = this.isMenuItemOutsideValue.bind(this);\npublic isMenuItemOutsideValue(item: any): boolean {\n  return item.type === this.outsideValue;\n}\n```\n\n## Multiple Context Menus\nYou can use multiple context menus in the same component if you would like.\n\n```html\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" [contextMenu]=\"basicMenu\" [contextMenuSubject]=\"item\"\u003e{{item?.name}}\u003c/li\u003e\n\u003c/ul\u003e\n\u003ccontext-menu #basicMenu\u003e\n  ...\n\u003c/context-menu\u003e\n\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" [contextMenu]=\"otherMenu\" [contextMenuSubject]=\"item\"\u003e{{item?.name}}\u003c/li\u003e\n\u003c/ul\u003e\n\u003ccontext-menu #otherMenu\u003e\n  ...\n\u003c/context-menu\u003e\n```\n\n```js\n@ViewChild('basicMenu') public basicMenu: ContextMenuComponent;\n@ViewChild('otherMenu') public otherMenu: ContextMenuComponent;\n```\n\n## Context Menu In a Different Component\nIf your `\u003ccontext-menu\u003e` component is in a different component from your list, you'll need to wire up the context menu event yourself.\n\n```html\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" (contextmenu)=\"onContextMenu($event, item)\"\u003eRight Click: {{item.name}}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n```js\nimport { ContextMenuService } from 'angular2-contextmenu';\n\n@Component({\n  ...\n})\nexport class MyContextMenuClass {\n  public items = [\n      { name: 'John', otherProperty: 'Foo' },\n      { name: 'Joe', otherProperty: 'Bar' }\n  ];\n\n  // Optional\n  @Input() contextMenu: ContextMenuComponent;\n\n  constructor(private contextMenuService: ContextMenuService) {}\n\n  public onContextMenu($event: MouseEvent, item: any): void {\n    this.contextMenuService.show.next({\n      // Optional - if unspecified, all context menu components will open\n      contextMenu: this.contextMenu,\n      event: $event,\n      item: item,\n    });\n    $event.preventDefault();\n    $event.stopPropagation();\n  }\n}\n```\n\n## Triggering the Context Menu with a Different Event\nThe context menu can be triggered at any point using the method above.  For instance, to trigger the context menu\nwith a left click instead of a right click, use this html:\n\n```html\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" (click)=\"onContextMenu($event, item)\"\u003eLeft Click: {{item.name}}\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nThis could be `(keydown)`, `(mouseover)`, or `(myCustomEvent)` as well.\n\n## Custom Styles\n\nThe html that is generated for the context menu looks like this:\n\n```html\n\u003cdiv class=\"dropdown angular2-contextmenu\"\u003e\n  \u003cul class=\"dropdown-menu\"\u003e\n    \u003cli\u003e\n      \u003ca\u003e\u003c!-- the template for each context menu item goes here --\u003e\u003c/a\u003e\n      \u003cspan\u003e\u003c!-- the template for each passive context menu item goes here --\u003e\u003c/span\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/div\u003e\n```\n\nYou can key off of the `angular2-contextmenu` class to create your own styles.  Note that the `ul.dropdown-menu` will have inline styles applied for `position`, `display`, `left` and `top` so that it will be positioned at the cursor when you right-click.\n\n```css\n.angular2-contextmenu .dropdown-menu {\n  border: solid 1px chartreuse;\n  background-color: darkgreen;\n  padding: 0;\n}\n.angular2-contextmenu li {\n  display: block;\n  border-top: solid 1px chartreuse;\n  text-transform: uppercase;\n  text-align: center;\n}\n.angular2-contextmenu li:first-child {\n  border-top:none;\n}\n.angular2-contextmenu a {\n  color:chartreuse;\n  display: block;\n  padding: 0.5em 1em;\n}\n.angular2-contextmenu a:hover {\n  color:darkgreen;\n  background-color:chartreuse;\n}\n```\n\n## Bootstrap 4\n\nIf you're using Bootstrap 4, you can specify a `useBootstrap4` property in the `forRoot` function of the `ContextMenuModule` in order to get the appropriate class names.  Like this:\n\n```js\n@NgModule({\n  import: [\n    ContextMenuModule.forRoot({\n      useBootstrap4: true,\n    }),\n  ],\n})\nexport class AppModule {}\n```\n\n**Or, if you want to repeat yourself,** you can add a `useBootstrap4` attribute to each `context-menu` component.  Like this:\n\n```html\n\u003ccontext-menu [useBootstrap4]=\"true\"\u003e\u003c/context-menu\u003e\n```\n\n## Close event emitter\n\nThere 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).\n\n```html\n\u003ccontext-menu (close)=\"processContextMenuCloseEvent()\"\u003e\u003c/context-menu\u003e\n```\n\n## CSS Transforms\n\nThe context menu will correctly position itself as long as the `\u003ccontext-menu\u003e` 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 with `transform: translate3d(0px 0px 0px)` in order to trigger the browser's GPU works just fine.\n\n## Deprecated syntax\n\nThis alternate, deprecated syntax will continue working until version 1.x.\n\n### Template\n\n```html\n\u003cul\u003e\n    \u003cli *ngFor=\"let item of items\" (contextmenu)=\"onContextMenu($event, item)\"\u003eRight Click: {{item.name}}\u003c/li\u003e\n\u003c/ul\u003e\n\u003ccontext-menu\u003e\u003c/context-menu\u003e\n```\n\n### Component Code\n\n```js\nimport { ContextMenuService } from 'angular2-contextmenu';\n\n@Component({\n  ...\n})\nexport class MyContextMenuClass {\n  public items = [\n      { name: 'John', otherProperty: 'Foo' },\n      { name: 'Joe', otherProperty: 'Bar' }\n  ];\n\n  constructor(private contextMenuService: ContextMenuService) {}\n\n  public onContextMenu($event: MouseEvent, item: any): void {\n    this.contextMenuService.show.next({\n      actions: [\n        {\n          html: (item) =\u003e `Say hi!`,\n          click: (item) =\u003e alert('Hi, ' + item.name)\n        },\n        {\n          html: (item) =\u003e `Something else`,\n          click: (item) =\u003e alert('Or not...')\n        },\n      ],\n      event: $event,\n      item: item,\n    });\n    $event.preventDefault();\n    $event.stopPropagation();\n  }\n}\n```\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacplmann%2Fangular2-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fisaacplmann%2Fangular2-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fisaacplmann%2Fangular2-contextmenu/lists"}