Skip to content
Context Menu Service for Angular
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.editorconfig initial commit Jul 2, 2018
.gitignore
LICENSE
README.md
angular.json
browserslist
build.ts feat: allow close animations Jul 30, 2018
circle.yml
karma.conf.js
package-lock.json
package.json
renovate.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json feat: angular 8 (#36) Oct 16, 2019
tslint.json

README.md

ngx-rightclick

npm CircleCI

Context Menu Service for Angular

Demo: https://ngx-rightclick.netlify.com/

Install

if you don't already have @angular/cdk that needs to be installed too

npm install @ctrl/ngx-rightclick

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


GitHub @scttcper  ·  Twitter @scttcper

You can’t perform that action at this time.