syncfusion-angular-context-menu

What this skill does

# 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 disa