Templates in Angular Context menu component

4 Sep 202511 minutes to read

Item template

The itemTemplate property in the ContextMenu component allows you to define custom templates for displaying menu items. This feature enables you to customize the appearance, layout, and content of menu items beyond the default text-based display. Use item templates when you need to include icons, formatted text, additional metadata, or complex HTML structures within menu items.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { Browser } from '@syncfusion/ej2-base';
import { ContextMenuComponent, ContextMenuModule, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['styles.css'],
  encapsulation: ViewEncapsulation.None,
  standalone: true,
  imports: [ContextMenuModule]
})

export class AppComponent {
  public content: string = '';

  @ViewChild('contextmenu')
  public contextmenu!: ContextMenuComponent;

  public data: any = [
    {
      answerType: 'Selection',
      description: 'Choose from options',
      iconCss: 'e-icons e-list-unordered',
    },
    {
      answerType: 'Yes / No',
      description: 'Select Yes or No',
      iconCss: 'e-icons e-check-box',
    },
    {
      answerType: 'Text',
      description: 'Type own answer',
      iconCss: 'e-icons e-caption',
      items: [
        {
          answerType: 'Single line',
          description: 'Type answer in a single line',
          iconCss: 'e-icons e-text-form',
        },
        {
          answerType: 'Multiple line',
          description: 'Type answer in multiple line',
          iconCss: 'e-icons e-text-wrap',
        },
      ],
    },
    {
      answerType: 'None',
      description: 'No answer required',
      iconCss: 'e-icons e-mouse-pointer',
    },
  ];

  onCreated(): void {
    if (Browser.isDevice) {
      this.content = 'Touch hold to open the Context Menu';
      this.contextmenu.animationSettings.effect = 'ZoomIn';
    } else {
      this.content = 'Right click/Touch hold to open the Context Menu';
      this.contextmenu.animationSettings.effect = 'SlideDown';
    }
  }

  addTemplateClass(args: BeforeOpenCloseMenuEventArgs): void {
    if (args.element.classList.contains('e-ul')) {
      args.element.classList.add('e-contextMenu-template');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize specific menu items

ContextMenu items can be customized using the beforeItemRender event. This event triggers while rendering each menu item, providing access to the item element and menu item data for customization based on specific requirements. The following example demonstrates how to add keyboard shortcuts to specific menu items by appending span elements during the rendering process.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'



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

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' #contextmenu target='#target' [items]='menuItems' (beforeItemRender)='itemBeforeEvent($event)'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'Save as...'
        },
        {
            text: 'View page source'
        },
        {
            text: 'Inspect'
        }];

    public itemBeforeEvent (args: MenuEventArgs) {
        let shortCutSpan: HTMLElement = createElement('span');
        let text: string = args.item.text as string;
        let shortCutText: string = text === 'Save as...' ? 'Ctrl + S' : (text === 'View page source' ? 'Ctrl + U'      : 'Ctrl + Shift + I');
        shortCutSpan.textContent = shortCutText;
        args.element.appendChild(shortCutSpan);
        shortCutSpan.setAttribute('class','shortcut');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To create span elements, the createElement utility function from @syncfusion/ej2-base is used.

Multi-level nesting

The ContextMenu component supports multiple levels of nesting for creating hierarchical menu structures. Achieve this by mapping the items property within parent menuItems. The following example demonstrates a three-level nested ContextMenu structure.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'
import { enableRipple } from '@syncfusion/ej2-base'



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

@Component({
imports: [
        
        ContextMenuModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<div class="e-section-control">
            <!--target element-->
            <div id="target">Right click / Touch hold to open the ContextMenu</div>
            <!-- To Render ContextMenu. -->
            <ejs-contextmenu id='contextmenu' #contextmenu target='#target' [items]='menuItems'></ejs-contextmenu>
            </div>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'Show All Bookmarks'
        },
        {
            text: 'Bookmarks Toolbar',
            items: [
                {
                    text: 'Most Visited',
                    items:[
                        {
                            text: 'Gmail'
                        },
                        {
                            text: 'Google'
                        }
                    ]
                },
                {
                    text: 'Recently Added'
                }
            ]
        }];

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

To open sub menu items only on click, set the showItemOnClick property to true.

See Also