scttcper / Ngx Rightclick
Licence: mit
Context Menu Service for Angular
Stars: ✭ 58
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Ngx Rightclick
ng2-right-click-menu
Right click context menu for Angular 2+
Stars: ✭ 51 (-12.07%)
Mutual labels: contextmenu
bookmarklets-context-menu
WebExtension allow to execute bookmarklets as privileged scripts
Stars: ✭ 67 (+15.52%)
Mutual labels: contextmenu
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (+53.45%)
Mutual labels: contextmenu
vue3-context-menu
A very simple context menu component for Vue3 一个简洁美观简单的Vue3右键菜单组件
Stars: ✭ 74 (+27.59%)
Mutual labels: contextmenu
Modern-UI-Components-for-VBA
A helper dll for VBA users to design modern UI components. No install required!
Stars: ✭ 139 (+139.66%)
Mutual labels: contextmenu
Open in Windows Terminal
No description or website provided.
Stars: ✭ 24 (-58.62%)
Mutual labels: contextmenu
ShellCommand
Customize your context menu. 告别注册表,自定义右键菜单。
Stars: ✭ 64 (+10.34%)
Mutual labels: contextmenu
Artplayer
🎨 ArtPlayer.js is a modern and full featured HTML5 video player
Stars: ✭ 484 (+734.48%)
Mutual labels: contextmenu
angular2-contextmenu
-Deprecated in favor of ngx-contextmenu- A context menu built with Angular 2 inspired by ui.bootstrap.contextMenu.
Stars: ✭ 68 (+17.24%)
Mutual labels: contextmenu
ContextMenuSwift
A better version of iOS 13 Context Menu
Stars: ✭ 162 (+179.31%)
Mutual labels: contextmenu
VirusTotalScanner
Scan suspicious applications with over 60 different anti-viruses with a mere two clicks and five seconds!
Stars: ✭ 18 (-68.97%)
Mutual labels: contextmenu
justContext.js
Styleable context menu in pure JS (no jQuery).
Stars: ✭ 78 (+34.48%)
Mutual labels: contextmenu
Blazorcontextmenu
A context menu component for Blazor !
Stars: ✭ 257 (+343.1%)
Mutual labels: contextmenu
editable-treemenu
a treemenu component which can edit(add/delete/rename) by contextMenu based on vue.js 2.0
Stars: ✭ 24 (-58.62%)
Mutual labels: contextmenu
twtree
a highly customizable tree component for vue 2
Stars: ✭ 27 (-53.45%)
Mutual labels: contextmenu
Context menu
💻 A Python library to create and deploy cross-platform native context menus. 💻
Stars: ✭ 263 (+353.45%)
Mutual labels: contextmenu
ngx-rightclick
Context Menu Service for Angular
Demo: https://ngx-rightclick.vercel.app
Install
if you don't already have @angular/cdk
that needs to be installed too
npm install @ctrl/ngx-rightclick
Dependencies
Latest version available for each version of Angular
ngx-rightclick | Angular |
---|---|
3.0.1 | 9.x |
current | >= 10.x |
Use
Import and Add to NgModule
import { ContextMenuModule } from '@ctrl/ngx-rightclick';
Add context menu directive to element and pass the menu component to be shown. Important the menu component must also be added as to entryComponents in your NgModule. See here
// show.component.ts
@Component({
template: `
<div [contextMenuTrigger]="menu" (menuAction)="handleMenuAction($event)">Right Click</div>
`,
})
export class ShowComponent {
// menu component imported and assigned locally
menu = SimpleMenuComponent;
}
// my-menu.component.ts
import { Component } from '@angular/core';
import { MenuComponent, ContextMenuService, MenuPackage } from '@ctrl/ngx-rightclick';
@Component({
selector: 'simple-menu',
// add your menu html
template: `<a (click)="handleClick()">Download</a>`,
})
export class SimpleMenuComponent extends MenuComponent {
// this module does not have animations, set lazy false
lazy = false;
constructor(public menuPackage: MenuPackage, public contextMenuService: ContextMenuService) {
super(menuPackage, contextMenuService);
// grab any required menu context passed via menuContext input
console.log(menuPackage.context);
}
handleClick() {
// IMPORTANT! tell the menu to close, anything passed in here is given to (menuAction)
this.contextMenuService.closeAll();
}
}
Last step add css somewhere in your global styles
.cdk-overlay-container {
position: fixed;
z-index: 1000;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ngx-contextmenu.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
}
// not required but can help with mobile right click
.target {
user-select: none;
}
[Inputs]
name | type | description |
---|---|---|
contextMenuTrigger / contextSubmenuTrigger | component |
the menu or submenu to be shown |
menuContext | any |
passed to the menu component via MenuPackage |
holdToDisplay | number |
default: 1000 ms pressing down on mobile to show menu |
(Ouput)
name | type | description |
---|---|---|
menuAction | any |
whatever is passed to ContextMenuService.closeAll
|
menuClose | void |
triggered whenever a menu or submenu is closed |
Submenu
Use the contextSubmenuTrigger
directive as you would the contextMenuTrigger inside your menu.
Other Options
ngx-contextmenu
Find the Angular Component of your dreams on angular.parts
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].