Revision history [back]

Here are the steps to utilize Angular's CdkMenuModule for building a personalized context menu when right-clicking:

1. Import CdkMenuModule into your AppModule or the module where you want to use the context menu:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CdkMenuModule } from '@angular/cdk/menu';

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule, CdkMenuModule],
  bootstrap: [AppComponent],
  declarations: [AppComponent]
})
export class AppModule { }

1. Create the context menu template in your component's HTML file using the cdk-menu directive:

<div cdkMenu #menu="cdkMenu" [cdkMenuTriggerFor]="myButton">
  <button cdkMenuItem (click)="save()">Save</button>
  <button cdkMenuItem (click)="delete()">Delete</button>
</div>

<button #myButton (contextmenu)="menu.open()">Right-click me</button>

Note that the cdkMenuTriggerFor directive takes the name of the button that should trigger the context menu to open. The contextmenu event is used to detect a right-click on the button element.

1. Implement the logic for the menu items in your component's TypeScript file:

import { Component } from '@angular/core';
import { CdkMenuTrigger } from '@angular/cdk/menu';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css'],
})
export class MyComponent {

  save() {
    // Implement save logic here
  }

  delete() {
    // Implement delete logic here
  }

}

Note that the CdkMenuTrigger service can be injected into the component constructor to control the opening and closing of the context menu:

import { Component } from '@angular/core';
import { CdkMenuTrigger } from '@angular/cdk/menu';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css'],
})
export class MyComponent {

  constructor(private menuTrigger: CdkMenuTrigger) { }

  onContextMenu(event: MouseEvent) {
    this.menuTrigger.openMenu();
    event.preventDefault();
    event.stopPropagation();
  }

  save() {
    // Implement save logic here
    this.menuTrigger.closeMenu();
  }

  delete() {
    // Implement delete logic here
    this.menuTrigger.closeMenu();
  }

}

Note that in this example, the onContextMenu handler is used to prevent the default context menu from appearing and to stop the event propagation. This prevents the default browser context menu from appearing when the custom context menu is opened.