Getting started with Angular Context Menu component

23 Jul 20265 minutes to read

The Context Menu component provides relevant actions based on the selected context, offering quick access to commands in various scenarios.

This guide provides step-by-step instructions for setting up an Angular project with TypeScript using Angular CLI, and integrating Syncfusion® Angular Context Menu component. The recommended setup below targets modern Angular (CLI ng add). For module-based or framework host setups, see See Also.

The Angular CLI simplifies creating, managing, and building Angular applications so you can start development quickly.

Prerequisites

  • Install a supported Node.js LTS release and npm (or another Node package manager) before continuing.
  • Ensure your environment meets the System Requirements for Syncfusion® Angular UI Components.
  • Supported Angular and Syncfusion package combinations are listed in the Version Compatibility guide. This walkthrough assumes Angular 17+ with the default application scaffolding (src/app/app.ts or the equivalent root component generated by your CLI version).

Setup the Angular application

A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Create a new application

With Angular CLI installed, execute this command to generate a new application:

ng new syncfusion-angular-app
  • This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]
  • By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss
  • During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

  • Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

  • Navigate to your newly created application directory:
cd syncfusion-angular-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Adding the Syncfusion® Angular Context Menu package

To install the Syncfusion® Angular Context Menu package, use the following command:

ng add @syncfusion/ej2-angular-navigations

The ng add command installs the package, registers it in package.json, and configures the required entries in your workspace automatically.

If ng add is unavailable in your setup, install the package manually with:

npm install @syncfusion/ej2-angular-navigations

Adding CSS reference

Themes for the Syncfusion® Context Menu component can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following npm command:

npm install @syncfusion/ej2-material3-theme

Then add the following CSS reference to the src/styles.css file. This is the default global stylesheet registered under styles in angular.json:

@import "../node_modules/@syncfusion/ej2-material3-theme/styles/context-menu/index.css";

Add Syncfusion® Context Menu component

After package and theme setup, update the root component. File name and class name can vary by Angular CLI version (src/app/app.ts with export class App, or app.component.ts with AppComponent). Replace the root component content with the sample below, or merge the Context Menu import, template, and data into your generated file.

For the full property list, see the Context Menu API reference.

import { Component } from '@angular/core';
import { ContextMenuModule , MenuItemModel} from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-root',
  imports: [ ContextMenuModule ],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  public menuItems: MenuItemModel[] = [
  {
      text: 'Cut'
  },
  {
      text: 'Copy'
  },
  {
      text: 'Paste'
  }];
}

Place the following markup in the component template file referenced by templateUrl (for example, src/app/app.html):

<div id="target">Right click / Touch hold to open the ContextMenu</div>
<ejs-contextmenu id='contextmenu' target='#target' [items]= 'menuItems'></ejs-contextmenu>

Running the application

From the project root:

ng serve

When the build succeeds, the CLI reports a local URL (default: http://localhost:4200). Open that URL in a browser to view the Context Menu. If the port is already in use, the CLI prompts for another port, or you can run ng serve --port 4201.

Stop the server with Ctrl+C in the terminal.

The following example illustrates the output in your browser.

See Also