syncfusion-angular-context-menu

# Implementing Syncfusion Angular ContextMenu The **ContextMenu** is a graphical user interface that appears when users right-click or perform touch-hold actions. It provides a context-aware menu with support for nested items, dynamic updates, animations, custom templates, and comprehensive event handling. This skill guides you through implementing, configuring, and customizing context menus for Angular applications. ## When to Use This Skill **Use this skill when:** - You need to create a right-click or touch-hold context menu - Managing menu items dynamically (add, remove, enable, disable) - Handling menu item click events and actions - Opening dialogs or navigating from menu selections - Customizing menu appearance with animations, icons, or themes - Showing/hiding items based on context or user permissions - Binding menu items from data sources - Creating complex menu templates or nested structures - Implementing responsive menus with scrolling - Adding keyboard shortcuts or accessibility features ## Component Overview The ContextMenu component enables intuitive right-click interfaces with: - ✅ Dynamic item management (add/remove/enable/disable) - ✅ Multi-level nested menus - ✅ Data binding from arrays or objects - ✅ Customizable animations (FadeIn, SlideDown, ZoomIn, None) - ✅ Template support for rich content (icons, HTML, tables) - ✅ Event handling (click, open, close) - ✅ Icon and URL navigation - ✅ Scrollable menus for large item lists - ✅ Accessibility with keyboard support ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - Package installation and dependencies - Angular environment setup (standalone architecture) - Creating your first ContextMenu - Configuring target elements - Basic menu item structure ### Menu Items Management 📄 **Read:** [references/menu-items-management.md](references/menu-items-management.md) - Adding menu items dynamically (insertBefore, insertAfter) - Removing menu items (removeItems method) - Enabling and disabling items (enableItems) - Showing and hiding items (showItems, hideItems) - Dynamic context-aware menus - Multi-level nested menus ### Data Binding 📄 **Read:** [references/data-binding.md](references/data-binding.md) - Populating items from data sources - MenuItemModel structure and properties - Parent-child item relationships - beforeItemRender event for item formatting - Dynamic data updates ### Interaction & Events 📄 **Read:** [references/interaction-and-events.md](references/interaction-and-events.md) - Menu item click handlers (select event) - Click-to-open submenus (showItemOnClick) - Programmatic open and close methods - Menu positioning with coordinates - Opening dialogs on item selection - MenuEventArgs and event properties ### Styling & Customization 📄 **Read:** [references/styling-and-customization.md](references/styling-and-customization.md) - Animation settings and effects (FadeIn, SlideDown, ZoomIn, None) - CSS customization and class targeting - Icon styling with iconCss property - URL navigation and external links - Scrollable menus (enableScrolling) - Responsive design and Theme Studio ### Templates & Advanced Features 📄 **Read:** [references/templates-and-advanced.md](references/templates-and-advanced.md) - Custom item templates (itemTemplate) - Rich content with HTML and tables - Character underlining and formatting - Separator items and grouping - Accessibility and keyboard navigation - Advanced template patterns ## Quick Start Example ```typescript import { Component } from '@angular/core'; import { ContextMenuModule } from '@syncfusion/ej2-angular-navigations'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; @Component({ selector: 'app-root', standalone: true, imports: [ContextMenuModule], template: ` <div class="e-section-control"> <!-- Target element for context menu --> <div id="target">Right click / Touch hold to open the ContextMenu</div> <!-- ContextMenu component --> <ejs-contextmenu id='contextmenu' target='#target' [items]='menuItems'> </ejs-contextmenu> </div> ` }) export class AppComponent { public menuItems: MenuItemModel[] = [ { text: 'Cut', iconCss: 'e-cm-icons e-cut' }, { text: 'Copy', iconCss: 'e-cm-icons e-copy' }, { text: 'Paste', iconCss: 'e-cm-icons e-paste' }, { separator: true }, { text: 'View', items: [ { text: 'Large icons' }, { text: 'Small icons' } ] } ]; } ``` ## Common Patterns ### Pattern 1: Dynamic Item Management ```typescript // Add items after 'Refresh' this.contextmenu.insertAfter([{ text: 'Sort By' }], 'Refresh'); // Remove 'Paste' item this.contextmenu.removeItems(['Paste']); // Disable 'Edit' item this.contextmenu.enableItems(['Edit'], false); ``` ### Pattern 2: Context-Aware Menus ```typescript beforeOpen(args: BeforeOpenCloseMenuEventArgs) { if ((args.event.target as HTMLElement).id === 'editor') { this.contextmenu.showItems(['Add', 'Edit', 'Delete']); this.contextmenu.hideItems(['Cut', 'Copy', 'Paste']); } } ``` ### Pattern 3: Menu Item Click Handler ```typescript itemSelect(args: MenuEventArgs): void { if (args.item.text === 'Save As...') { this.dialogComponent.show(); } } ``` ### Pattern 4: Animation Configuration ```typescript public animationSettings = { effect: 'FadeIn', duration: 400, easing: 'ease' }; ``` ## Complete API Reference ### Component Properties #### Core Configuration Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `target` | `string` | `''` | **Required.** Specifies target element selector in which the ContextMenu should be opened. | | `items` | `MenuItemModel[]` | `[]` | Specifies menu items with its properties which will be rendered as ContextMenu. | | `showItemOnClick` | `boolean` | `false` | Specifies whether to show the sub menu or not on click. When `true`, the sub menu will open only on mouse click. | | `filter` | `string` | `''` | Specifies the filter selector for elements inside the target in that the context menu will be opened. | | `hoverDelay` | `number` | `0` | If `hoverDelay` is set by particular number, the menu will open after that period (in milliseconds). | #### Styling & Appearance Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `animationSettings` | `MenuAnimationSettingsModel` | `{ duration: 400, easing: 'ease', effect: 'SlideDown' }` | Specifies the animation settings for the sub menu open/close. See [Animation Settings](#animation-settings) section. | | `cssClass` | `string` | `''` | Defines class/multiple classes separated by a space in the Menu wrapper. Use for custom styling. | | `enableRtl` | `boolean` | `false` | Enable or disable rendering component in right to left direction. | #### Data & Behavior Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `itemTemplate` | `string \| Function` | `null` | This property allows you to define custom templates for items in the ContextMenu. Can be string selector or template function. | | `locale` | `string` | `''` | Overrides the global culture and localization value for this component. Default global culture is `'en-US'`. | | `enableScrolling` | `boolean` | `false` | Specifies whether to enable/disable the scrollable option in ContextMenu. | #### Security & Persistence Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `enableHtmlSanitizer` | `boolean` | `true` | Specifies whether to enable the rendering of untrusted HTML values. If `true`, the component will sanitize any suspected untrusted strings and scripts before rendering them. Set to `false` only when you trust the HTML source completely. | | `enablePersistence` | `boolean` | `false` | Enable or disable persisting component's state between page reloads. When enabled, menu state is saved in localStorage. | #### Property Example - Basic Configuration **Brief Example:** ```typescript @Component({ selector: 'app-context-menu', template: ` <div id="target">Right click here</div> <ejs-contextmenu target='#target' [items]='items' [animationSettings]='animSettings' cssClass='custom-menu'> </ejs-contextmenu> ` }) export class ContextMenuComponent { items: MenuItemModel[] = [ { text: 'Edit' }, { text: 'Delete' } ]; animSettings = { duration: 300, effect: 'FadeIn', easing: 'ease-out' }; } ``` **Full Working Example:** ```typescript import { Component, ViewChild } from '@angular/core'; import { ContextMenuComponent } from '@syncfusion/ej2-angular-navigations'; import { MenuItemModel } from '@syncfusion/ej2-navigations'; @Component({ selector: 'app-context-menu-config', standalone: true, imports: [ContextMenuModule], template: ` <div class="container"> <h3>Advanced Configuration Example</h3> <!-- Target element for context menu --> <div id="configTarget" class="target-box"> Right click or touch hold to open menu </div> <!-- ContextMenu with complete configuration --> <ejs-contextmenu #contextMenu id='contextMenu' target='#configTarget' [items]='menuItems' [animationSettings]='animationSettings' cssClass='modern-menu' [showItemOnClick]='true' [enableScrolling]='true' [hoverDelay]='300' [enableHtmlSanitizer]='true' [enablePersistence]='true' locale='en-US'> </ejs-contextmenu> </div> `, styles: [` .target-box { width: 300px; height: 200px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; background: #f5f5f5; cursor: context-menu; } `] }) export class AdvancedContextMenuComponent { @ViewChild('contextMenu') contextMenu!: ContextMenuComponent; menuItems: MenuItemModel[] = [ { text: 'Edit', iconCss: 'e-cm-icons e-edit', id: 'edit' }, { text: 'Delete', iconCss: 'e-cm-icons e-delete', id: 'delete' }, { separator: true }, { text: 'More', id: 'more' } ]; animationSettings = { effect: 'FadeIn' as any, duration: 400, easing: 'ease-in-out' }; } ``` ### Menu Item Properties (MenuItemModel) MenuItemModel defines the structure for each menu item. Each item in the `items` array follows this model: | Property | Type | Optional | Description | |----------|------|----------|-------------| | `text` | `string` | No | **Required.** Specifies text for menu item. This is the display label shown to users. | | `id` | `string` | Yes | Specifies the id for menu item. Use this for identifying items in methods like `enableItems()`, `removeItems()`, etc. | | `items` | `MenuItemModel[]` | Yes | Specifies the sub menu items that is the array of MenuItem model. Creates nested/hierarchical menus. | | `separator` | `boolean` | Yes | Specifies separator between the menu items. Separators are either horizontal or vertical lines used to group menu items. Set to `true` to create a visual divider. | | `iconCss` | `string` | Yes | Defines class/multiple classes separated by a space for the menu Item that is used to include an icon. Menu Item can include font icon and sprite image. Example: `iconCss: 'e-icons e-edit'`. | | `url` | `string` | Yes | Specifies url for menu item that creates the anchor link to navigate to the url provided. When clicked, navigates to this URL. | | `htmlAttributes` | `Record<string, any>` | Yes | Specifies the htmlAttributes property to support adding custom attributes to the menu items. Example: `{ 'data-info': 'value', 'title': 'My Tooltip' }`. | #### MenuItem Example - Basic Usage **Brief Example:** ```typescript items: MenuItemModel[] = [ { text: 'Cut', id: 'cut', iconCss: 'e-icons e-cut' }, { text: 'Copy', id: 'copy', iconCss: 'e-icons e-copy' }, { text: 'Paste', id: 'paste', iconCss: 'e-icons e-paste' }, { separator: true },