Context Menu Service for Angular | ngx-rightclick

ngx-rightclick is a multi-level, multi-target right-click context menu component for Angular 6+ applications.

angular context menu example, angular context menu left click, angular material context menu, context menu directive angular, mouse right click event in angular

Lightweight Javascript Library To Create A Custom Context Menu For Your Website

How to make use of it:

Install:

npm install @ctrl/ngx-rightclick

1. Import and add to NgModule.

import { ContextMenuModule } from '@ctrl/ngx-rightclick';

2. Add a context menu directive to the element and pass the menu component to be displayed.

// 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();
  }
}

3. The last step is to 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]

nametypedescription
contextMenuTrigger / contextSubmenuTriggercomponentthe menu or submenu to be shown
menuContextanypassed to the menu component via MenuPackage
holdToDisplaynumberdefault: 1000 ms pressing down on mobile to show menu

(Output)

nametypedescription
menuActionanywhatever is passed to ContextMenuService.closeAll
menuClosevoidtriggered whenever a menu or submenu is closed

Context Menu Service for Angular, ngx-rightclick Plugin/Github


See Demo And Download

Official Website(scttcper): Click Here

This superior jQuery/javascript plugin is developed by scttcper. For extra advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…