{"id":42207717,"url":"https://github.com/bradenhc/ngux-contextmenu","last_synced_at":"2026-01-27T00:40:26.852Z","repository":{"id":57130757,"uuid":"136218275","full_name":"bradenhc/ngux-contextmenu","owner":"bradenhc","description":"A simple, customizable context menu built for Angular 6 applications","archived":false,"fork":false,"pushed_at":"2018-06-25T23:07:29.000Z","size":194,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-06T03:44:53.340Z","etag":null,"topics":["angular","angular6","angular6-component","angular6-library","context-menu","contextmenu","contextmenu-component"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"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/bradenhc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-05T18:26:08.000Z","updated_at":"2018-06-25T23:07:30.000Z","dependencies_parsed_at":"2022-08-31T20:01:07.964Z","dependency_job_id":null,"html_url":"https://github.com/bradenhc/ngux-contextmenu","commit_stats":null,"previous_names":["bradenhitchcock/ngux-contextmenu"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bradenhc/ngux-contextmenu","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradenhc%2Fngux-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradenhc%2Fngux-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradenhc%2Fngux-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradenhc%2Fngux-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bradenhc","download_url":"https://codeload.github.com/bradenhc/ngux-contextmenu/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bradenhc%2Fngux-contextmenu/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28794012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","angular6","angular6-component","angular6-library","context-menu","contextmenu","contextmenu-component"],"created_at":"2026-01-27T00:40:26.078Z","updated_at":"2026-01-27T00:40:26.829Z","avatar_url":"https://github.com/bradenhc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NGUX Context Menu\n\nA simple right-click context menu for Angular 6 applications with support for Font Awesome icons\nvia the \n[`@fortawesome/angular-fontawesome`](https://www.npmjs.com/package/@fortawesome/angular-fontawesome) \nmodule.\n\n## Installation\n\nThis module has a dependency on `@fortawesome/angular-fontawesome`. Font Awesome provides several\nbeautiful and modern icons for free that are available to use to decorate the context menu\nitems. For now, this means that the dependency is required. The next release will remove this\nrequired dependency and instead offer it as an option. Until then, please install the required\ndependencies.\n\n### Install using Yarn\n\n```\nyarn add @fortawesome/fontawesome-svg-core\nyarn add @fortawesome/free-solid-svg-icons\nyarn add @fortawesome/angular-fontawesome\nyarn add @ngux/contextmenu\n```\n\n## Usage\n\nThe simplest way to use the context menu is first to *import* the `ContextMenuModule` in your\ncomponent module:\n\n```typescript\nimport { ContextMenuModule } from '@ngux/contextmenu';\n\n@NgModule({\n    ...\n    imports: [\n        ...\n        ContextMenuModule\n    ]\n    ...\n})\nexport class AppModule {}\n```\n\nAnd then to *include* the context menu and triggers in your HTML file:\n\n```html\n\u003c!-- Context menu trigger --\u003e\n\u003cp nguxContextMenuTrigger\u003eRight Click Me!!\u003c/p\u003e\n\n\u003c!-- Context Menu Definition --\u003e\n\u003cngux-contextmenu\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Hello World'\" (click)=\"sayHello()\"\u003e\u003c/ngux-contextmenu-item\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Goodbye'\" (click)=\"sayGoodbye()\"\u003e\u003c/ngux-contextmenu-item\u003e\n\u003c/ngux-contextmenu\u003e\n```\n\nYou can also use the `nguxContextMenuTrigger` directive on multiple HTML elements to open a single \ncontext menu definition from multiple triggers:\n\n```html\n\u003c!-- Context menu trigger --\u003e\n\u003cp nguxContextMenuTrigger\u003eRight Click Me!!\u003c/p\u003e\n\u003cspan nguxContextMenuTrigger\u003eRight Click Me Too!!\u003c/span\u003e\n\u003cbutton nguxContextMenuTrigger\u003eRight Click Me Three!!\u003c/button\u003e\n\n\u003c!-- Context Menu Definition --\u003e\n\u003cngux-contextmenu\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Hello World'\" (click)=\"sayHello()\"\u003e\u003c/ngux-contextmenu-item\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Goodbye'\" (click)=\"sayGoodbye()\"\u003e\u003c/ngux-contextmenu-item\u003e\n\u003c/ngux-contextmenu\u003e\n```\n\nIf you want to customize the action for the context menu depending on which trigger element you\nclicked on, you can simply register a `(contextmenu)` event listener on the trigger to set the\nselected element and then reference that element inside of the `(click)` event listeners.\n\n```html\n\u003c!-- Context menu trigger --\u003e\n\u003cp nguxContextMenuTrigger (contextmenu)=\"selected = item1\"\u003eRight Click Me!!\u003c/p\u003e\n\u003cp nguxContextMenuTrigger (contextmenu)=\"selected = item2\"\u003eRight Click Me!!\u003c/p\u003e\n\u003cp nguxContextMenuTrigger (contextmenu)=\"selected = item3\"\u003eRight Click Me!!\u003c/p\u003e\n\n\u003c!-- Context Menu Definition --\u003e\n\u003cngux-contextmenu\u003e\n    \u003cngux-contextmenu-item [text]=\"'Introduce'\" (click)=\"introduceSelected()\"\u003e\u003c/ngux-contextmenu-item\u003e\n    \u003cngux-contextmenu-item [text]=\"'Dismiss'\" (click)=\"dismissSelected()\"\u003e\u003c/ngux-contextmenu-item\u003e\n\u003c/ngux-contextmenu\u003e\n```\n\nThere is plan for future support of a `[model]` property on the directive that will take care\nof this for you, but it is currently not implemented.\n\n### Scopes\n\nThe NGUX Context Menu simplifies defining context menus by using scopes to allow association between\ncontext menus and their triggers. When a trigger with a set `[nguxScope]` property is right-clicked,\nonly the `ngux-contextmenu` element that has a matching scope will be opened. Two context menus\ncannot have the same scope.\n\nIn the following example, right-clicking on the content between the `\u003cp\u003e` tags will open the context\nmenu, but right-clicking the content between the `\u003cspan\u003e` tags will not.\n\n```html\n\u003c!-- Context menu trigger --\u003e\n\u003cp nguxContextMenuTrigger [nguxScope]=\"'myscope'\"\u003eRight Click Me!!\u003c/p\u003e\n\u003cspan nguxContextMenuTrigger\u003eRight Click Me Too!!\u003c/span\u003e\n\n\u003c!-- Context Menu Definition --\u003e\n\u003cngux-contextmenu [scope]=\"'myscope'\"\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Hello World'\" (click)=\"sayHello()\"\u003e\u003c/ngux-contextmenu-item\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Goodbye'\" (click)=\"sayGoodbye()\"\u003e\u003c/ngux-contextmenu-item\u003e\n\u003c/ngux-contextmenu\u003e\n```\n\n### Context Menu Items\n\nThe context menu will only include `\u003cngux-contextmenu-item\u003e` tags in the final result of the\nmenu. These components have three properties:\n\n- `[text]` - the text that will be displayed\n- `[icon]` - a valid `@fortawesome/angular-fontawesome` icon\n- `[alias]` - smaller text to display on the far right of the context menu item\n\nA complete example demonstrating all the current features of the NGUX Context Menu is given\nbelow:\n\n**`app.module.ts`**\n```typescript\nimport { ContextMenuModule } from '@ngux/contextmenu';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\n\n@NgModule({\n    ...\n    imports: [\n        ...\n        FontAwesomeModule,\n        ContextMenuModule\n    ]\n    ...\n})\nexport class AppModule {}\n```\n\n**`app.component.ts`**\n```typescript\nimport { Component } from '@angular/core';\nimport { faGlobe } from '@fortawesome/free-solid-svg-icons';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css']\n})\nexport class AppComponent {\n  title = 'app';\n\n  faGlobe = faGlobe;\n\n  sayHello() {\n    console.log(\"Hello World!\");\n  }\n\n  sayGoodbye() {\n    console.log(\"Goodbye!\");\n  }\n\n  onButtonClick(): void {\n    console.log(\"Button clicked!\");\n  }\n}\n```\n\n**`app.component.html`**\n```html\n\u003c!-- Various triggers to test --\u003e\n\u003cp nguxContextMenuTrigger [nguxScope]=\"'scopeName'\"\u003eRight Click Me!!\u003c/p\u003e\n\u003cp nguxContextMenuTrigger\u003eRight Click Me!!\u003c/p\u003e\n\u003cbutton nguxContextMenuTrigger \n    [nguxScope]=\"'scopeName'\" \n    (click)=\"onButtonClick()\"\u003e\n    Right Click Me!!\n\u003c/button\u003e\n\n\u003c!-- Context Menu Definition --\u003e\n\u003cngux-contextmenu [scope]=\"'scopeName'\"\u003e\n    \u003cngux-contextmenu-item \n        [icon]=\"faGlobe\" \n        [text]=\"'Say Hello World'\" \n        [alias]=\"'Ctrl + s'\" \n        (click)=\"sayHello()\"\u003e\n    \u003c/ngux-contextmenu-item\u003e\n    \u003cngux-contextmenu-item [text]=\"'Say Goodbye'\" (click)=\"sayGoodbye()\"\u003e\u003c/ngux-contextmenu-item\u003e\n\u003c/ngux-contextmenu\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradenhc%2Fngux-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbradenhc%2Fngux-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbradenhc%2Fngux-contextmenu/lists"}