Create Custom Context Menu in Angular

 As professional Angular developers sometimes we come across unconventional requirements. One such requirement is to override the browser’s right-click context menu and provide a custom context menu.

There are a few ways to approach this requirement. One way is to use Angular CDK. A great article on this can be found here.

Another way is to leverage the contextmenu event of HTML elements. This event is supported by all major browsers as can be seen below from MDN documentation. This is the approach we will take in this article.

Browser support for contextmenu event

This approaches’ simplicity comes from the fact that we just need the understanding of Angular’s parent-child communication to achieve our objective.

So, let’s get started.

Our app component template is as below.

<div class="container">
  <div class="element" (contextmenu)="displayContextMenu($event); false">
    <span>Right click on me!</span>
    <app-context-menu
      *ngIf="rightClickMenuItems.length > 0 && isDisplayContextMenu"
      [ngStyle]="getRightClickMenuStyle()"
      [contextMenuItems]="rightClickMenuItems"
      (onContextMenuItemClick)="handleMenuItemClick($event)"
    ></app-context-menu>
  </div>
</div>

The contextmenu event is handled on the div with class element. Notice the false after the event handler method call. This is important as it prevents the default right click browser context menu from opening.
The AppContextMenu component is embedded as a child component with conditional rendering using *ngIf. Eventually, this component will be rendered when the user right-clicks on the div with class element.
Custom context menu on a div element
Let’s have a look at the AppComponent class.

import { Component, HostListener } from '@angular/core';
import { ContextMenuModel } from './Interfaces/context-menu-model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'context-menu';

  isDisplayContextMenu: boolean;
  rightClickMenuItems: Array<ContextMenuModel> = [];
  rightClickMenuPositionX: number;
  rightClickMenuPositionY: number;

  displayContextMenu(event) {

    this.isDisplayContextMenu = true;

    this.rightClickMenuItems = [
      {
        menuText: 'Refactor',
        menuEvent: 'Handle refactor',
      },
      {
        menuText: 'Format',
        menuEvent: 'Handle format',
      },
    ];

    this.rightClickMenuPositionX = event.clientX;
    this.rightClickMenuPositionY = event.clientY;

  }

  getRightClickMenuStyle() {
    return {
      position: 'fixed',
      left: `${this.rightClickMenuPositionX}px`,
      top: `${this.rightClickMenuPositionY}px`
    }
  }

  handleMenuItemClick(event) {
    switch (event.data) {
      case this.rightClickMenuItems[0].menuEvent:
           console.log('To handle refactor');
           break;
      case this.rightClickMenuItems[1].menuEvent:
          console.log('To handle formatting');
    }
  }

  @HostListener('document:click')
  documentClick(): void {
    this.isDisplayContextMenu = false;
  }

}

Notice the way in which the rightClickMenuItems property is set. It’s an array of type ContextMenuModel which allows us to configure different menu texts and corresponding events. Later these events are emitted back to the parent component when the user clicks an item on the context menu.
To display the context menu at right click position we have extracted the clientX and clientY properties of the contextmenu event object. These are later leveraged in getRightClickMenuStyle method and hooked up to AppContextMenu component using ngStyle.
Now, let’s have a look at the context-menu component template.
<ng-container>
  <div
    class="menu-link"
    *ngFor="let menuItem of contextMenuItems; index as i"
    (click)="onContextMenuClick($event, menuItem.menuEvent)">
    {{ menuItem.menuText }}
    <hr *ngIf="i < contextMenuItems.length - 1" />
  </div>
</ng-container>

It loops over the input property contextMenuItemsto generate a list of menu links using *ngFor. Note how the click event handler is passing the event menuItem.menuEvent that needs to be raised based on the input data received from the parent.
The ContextMenuComponent class consists of just an input and an output properties.
import { Component, Input, Output, EventEmitter } from "@angular/core";
import { ContextMenuModel } from "../Interfaces/context-menu-model";

@Component({
  selector: "app-context-menu",
  templateUrl: "./context-menu.component.html",
  styleUrls: ["./context-menu.component.css"],
})
export class ContextMenuComponent {
  @Input()
  contextMenuItems: Array<ContextMenuModel>;

  @Output()
  onContextMenuItemClick: EventEmitter<any> = new EventEmitter<any>();

  onContextMenuClick(event, data): any {
    this.onContextMenuItemClick.emit({
      event,
      data,
    });
  }
}

In a sense, it is a perfect dumb component and hence best for reusability! The parent component has complete control over the way it wants to use the context menu.
Based on the user’s selection on the custom context menu, the handler method emits output events with appropriate data. Now it’s up to the parent to handle the events the way it is supposed to based on the use case. For simplicity, we are just console logging here.
Before we wrap up, let’s discuss how we can close the context menu.
It’s fairly simple. A document click event listener has been set up on the AppComponentthat sets the isDisplayContextMenu flag to false.
And that’s it! We now have an extremely simple yet reusable custom context menu using only the basics of Angular.