{"id":13497403,"url":"https://github.com/msarsha/ng2-right-click-menu","last_synced_at":"2025-10-27T01:30:42.733Z","repository":{"id":18143133,"uuid":"83304161","full_name":"msarsha/ng2-right-click-menu","owner":"msarsha","description":"Right click context menu for Angular 2+","archived":false,"fork":false,"pushed_at":"2023-01-07T06:48:34.000Z","size":5469,"stargazers_count":50,"open_issues_count":34,"forks_count":21,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-01T01:25:58.129Z","etag":null,"topics":["angular","angular2","angular2-directive","context-menu","contextmenu","right-click"],"latest_commit_sha":null,"homepage":"https://msarsha.github.io/ng2-right-click-menu/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/msarsha.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-27T11:42:34.000Z","updated_at":"2023-07-10T19:50:06.000Z","dependencies_parsed_at":"2022-09-01T11:31:07.549Z","dependency_job_id":null,"html_url":"https://github.com/msarsha/ng2-right-click-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msarsha%2Fng2-right-click-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msarsha%2Fng2-right-click-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msarsha%2Fng2-right-click-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/msarsha%2Fng2-right-click-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/msarsha","download_url":"https://codeload.github.com/msarsha/ng2-right-click-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238418233,"owners_count":19468869,"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","angular2","angular2-directive","context-menu","contextmenu","right-click"],"created_at":"2024-07-31T20:00:30.436Z","updated_at":"2025-10-27T01:30:42.370Z","avatar_url":"https://github.com/msarsha.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"## ng2-right-click-menu\n_Right click context menu for Angular 2+_\n\n__DEMO__ https://msarsha.github.io/ng2-right-click-menu/\n\n### Dependencies\n\n`@angular/cdk`\n\n`@angular/cdk/overlay-prebuilt.css`\n\n### Setup\n\n`npm install --save ng2-right-click-menu @angular/cdk`\n\nimport `ShContextMenuModule`\n\n````typescript\nimport {ShContextMenuModule} from 'ng2-right-click-menu'\n\n@NgModule({\n  //...\n  imports: [ShContextMenuModule]\n  //...\n})\n````\n\nimport css file in your `styles.css`:\n\n````css\n  @import \"~@angular/cdk/overlay-prebuilt.css\";\n````\n\n## Usage\n\n#### Defining a Basic Menu Template\n\nThe menu template is built using the `sh-context-menu` component as the menu wrapper,\nand nested `ng-template` with the `shContextMenuItem` directive for every menu item:\n\nThe `shContextMenuItem` directive provide a template variable (`let-data`) that gives you access to the data object attached to the menu.\n\n````html\n\u003csh-context-menu #menu\u003e\n  \u003cng-template shContextMenuItem let-data (click)=\"onClick($event)\"\u003e\n    \u003cdiv\u003e\n      Menu Item - {{data.label}}\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n\u003c/sh-context-menu\u003e\n````\n\n#### Attaching Menu To An Element\n\nAttaching works by using the `shAttachMenu` directive and providing the `#menu` (from the above example) template variable:\n\nThe object provided to the `[shMenuData]` input will be available as a template variable inside `ng-template`s with `shContextMenuItem`\n\n```html\n\u003cdiv [shAttachMenu]=\"menu\" [shMenuData]=\"data\"\u003eRight Click Me\u003c/div\u003e\n```\n\n## Sub Menus\n\nSub menu is attached to the `shContextMenuItem` directive using the `[subMenu]` input.\n\nThe `[subMenu]` input is provided with a `sh-context-menu`'s template variable (just like attaching a menu to an element).\n\n````html\n\u003csh-context-menu #menu\u003e\n  \u003cng-template shContextMenuItem let-data [subMenu]=\"#nestedMenu\"\u003e\n    \u003cdiv\u003e\n      Menu Item - {{data.label}}\n    \u003c/div\u003e\n  \u003c/ng-template\u003e\n  \u003csh-context-menu #nestedMenu\u003e\n    \u003cng-template shContextMenuItem let-data\u003e\n      \u003cdiv\u003e\n        Menu Item - {{data.label}}\n      \u003c/div\u003e\n    \u003c/ng-template\u003e\n  \u003c/sh-context-menu\u003e\n\u003c/sh-context-menu\u003e\n````\n\n## API\n\n#### sh-context-menu (component)\n\nName | Type | Default | Description\n:---:|:---:|:---:|:---:\n[this]|any|null|the `this` context for input callbacks (visible) - typically the menu's host component\n\n#### shContextMenuItem (directive)\n\nName | Type | Default | Description\n:---:|:---:|:---:|:---:\n[subMenu]|ShContextMenuComponent|null|sub menu\n[divider]|boolean|false|render a divider\n[closeOnClick]|boolean|true|should the menu close on click\n[visible]|(event: ShContextMenuClickEvent) =\u003e boolean|null|function to determine if a item is visible\n(click)|(event: ShContextMenuClickEvent) =\u003e void|null|click handler\n\n#### shAttachMenu (directive)\n\nName | Type | Default | Description\n:---:|:---:|:---:|:---:\n[shAttachMenu]|ShContextMenuComponent|null|the menu that will be attached to the element\n[shMenuTriggers]|string[]|null|list of event names that will trigger the menu\n[shMenuData]|any|null|the data object that will be injected to the menu item's template\n\n### Setting up development env\n\n`npm start` to run the demo application\n\ndevelop the library under `/lib`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsarsha%2Fng2-right-click-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmsarsha%2Fng2-right-click-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmsarsha%2Fng2-right-click-menu/lists"}