syncfusion-angular-context-menu

Syncfusion Angular ContextMenu の実装

ContextMenu は、ユーザーが右クリックしたり、タッチして長押ししたりしたときに表示されるグラフィカルユーザーインターフェイスです。ネストされた項目、動的な更新、アニメーション、カスタムテンプレート、包括的なイベント処理に対応した、状況に応じたメニューを提供します。このスキルでは、Angular アプリケーション向けのコンテキストメニューの実装、設定、カスタマイズについて説明します。

このスキルを使用する場面

次のような場合にこのスキルを使用します。

• 右クリックまたはタッチして長押ししたときに表示するコンテキストメニューを作成する必要がある場合
• メニュー項目を動的に管理する場合（追加、削除、有効化、無効化）
• メニュー項目のクリックイベントとアクションを処理する場合
• メニューの選択項目からダイアログを開いたり、画面遷移したりする場合
• アニメーション、アイコン、テーマを使ってメニューの外観をカスタマイズする場合
• 状況やユーザー権限に応じて項目を表示／非表示にする場合
• データソースからメニュー項目をバインドする場合
• 複雑なメニューテンプレートやネスト構造を作成する場合
• スクロールに対応したレスポンシブメニューを実装する場合
• キーボードショートカットやアクセシビリティ機能を追加する場合

コンポーネントの概要

ContextMenu コンポーネントは、使いやすい右クリックインターフェイスを次の機能とともに実現します。

• ✅ 項目の動的な管理（追加／削除／有効化／無効化）
• ✅ マルチレベルのネストメニュー
• ✅ 配列またはオブジェクトからのデータバインディング
• ✅ カスタマイズ可能なアニメーション（FadeIn、SlideDown、ZoomIn、None）
• ✅ リッチコンテンツ（アイコン、HTML、テーブル）を扱うテンプレートのサポート
• ✅ イベント処理（クリック、開く、閉じる）
• ✅ アイコンおよび URL によるナビゲーション
• ✅ 項目数が多い場合に対応したスクロール可能なメニュー
• ✅ キーボード操作に対応したアクセシビリティ

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールと依存関係
• Angular 環境の設定（スタンドアロンアーキテクチャ）
• 最初の ContextMenu の作成
• 対象要素の設定
• 基本的なメニュー項目の構造

メニュー項目の管理

📄 参照： references/menu-items-management.md

• メニュー項目の動的な追加（insertBefore、insertAfter）
• メニュー項目の削除（removeItems メソッド）
• 項目の有効化と無効化（enableItems）
• 項目の表示と非表示（showItems、hideItems）
• 状況に応じた動的なメニュー
• マルチレベルのネストメニュー

データバインディング

📄 参照： references/data-binding.md

• データソースからの項目の設定
• MenuItemModel の構造とプロパティ
• 親項目と子項目の関係
• 項目の書式設定に使用する beforeItemRender イベント
• 動的なデータ更新

インタラクションとイベント

📄 参照： references/interaction-and-events.md

• メニュー項目のクリックハンドラー（select イベント）
• クリックによるサブメニューの表示（showItemOnClick）
• プログラムによる開閉メソッド
• 座標によるメニューの配置
• 項目の選択時にダイアログを開く
• MenuEventArgs とイベントプロパティ

スタイル設定とカスタマイズ

📄 参照： references/styling-and-customization.md

• アニメーションの設定と効果（FadeIn、SlideDown、ZoomIn、None）
• CSS のカスタマイズとクラスの指定
• iconCss プロパティを使用したアイコンのスタイル設定
• URL によるナビゲーションと外部リンク
• スクロール可能なメニュー（enableScrolling）
• レスポンシブデザインと Theme Studio

テンプレートと高度な機能

📄 参照： references/templates-and-advanced.md

• カスタム項目テンプレート（itemTemplate）
• HTML やテーブルを使ったリッチコンテンツ
• 文字の下線と書式設定
• セパレーター項目とグループ化
• アクセシビリティとキーボードナビゲーション
• 高度なテンプレートパターン

クイックスタートの例

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">
      
      <div id="target">Right click / Touch hold to open the ContextMenu</div>
      
      
      <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' }
      ]
    }
  ];
}

よく使われるパターン

パターン 1：項目の動的な管理

// 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);

パターン 2：状況に応じたメニュー

beforeOpen(args: BeforeOpenCloseMenuEventArgs) {
  if ((args.event.target as HTMLElement).id === 'editor') {
    this.contextmenu.showItems(['Add', 'Edit', 'Delete']);
    this.contextmenu.hideItems(['Cut', 'Copy', 'Paste']);
  }
}

パターン 3：メニュー項目のクリックハンドラー

itemSelect(args: MenuEventArgs): void {
  if (args.item.text === 'Save As...') {
    this.dialogComponent.show();
  }
}

パターン 4：アニメーションの設定

public animationSettings = {
  effect: 'FadeIn',
  duration: 400,
  easing: 'ease'
};

API リファレンス全体

コンポーネントのプロパティ

基本設定プロパティ

プロパティ	型	デフォルト	説明
target	string	''	必須。 ContextMenu を開く対象要素のセレクターを指定します。
items	MenuItemModel[]	[]	ContextMenu として表示するメニュー項目とそのプロパティを指定します。
showItemOnClick	boolean	false	クリック時にサブメニューを表示するかどうかを指定します。true の場合、サブメニューはマウスクリック時にのみ開きます。
filter	string	''	コンテキストメニューを開く対象となる、ターゲット内の要素のフィルターセレクターを指定します。
hoverDelay	number	0	hoverDelay に数値を設定すると、その時間（ミリ秒）が経過した後にメニューが開きます。

スタイルと外観のプロパティ

プロパティ	型	デフォルト	説明
animationSettings	MenuAnimationSettingsModel	{ duration: 400, easing: 'ease', effect: 'SlideDown' }	サブメニューを開閉するときのアニメーション設定を指定します。アニメーション設定のセクションを参照してください。
cssClass	string	''	メニューのラッパーに、スペース区切りで1つ以上のクラスを定義します。カスタムスタイルに使用します。
enableRtl	boolean	false	コンポーネントを右から左へ読む方向で描画するかどうかを設定します。

データと動作のプロパティ

プロパティ	型	デフォルト	説明
itemTemplate	string | Function	null	ContextMenu の項目にカスタムテンプレートを定義できます。文字列セレクターまたはテンプレート関数を指定できます。
locale	string	''	このコンポーネントのグローバルなカルチャーおよびローカライズの値を上書きします。デフォルトのグローバルカルチャーは 'en-US' です。
enableScrolling	boolean	false	ContextMenu でスクロール可能なオプションを有効または無効にするかどうかを指定します。

セキュリティと永続化のプロパティ

プロパティ	型	デフォルト	説明
enableHtmlSanitizer	boolean	true	信頼できない HTML 値の描画を有効にするかどうかを指定します。true の場合、コンポーネントは描画前に、信頼できない可能性のある文字列やスクリプトをサニタイズします。HTML ソースを完全に信頼できる場合に限り、false に設定してください。
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保持するかどうかを設定します。有効にすると、メニューの状態が localStorage に保存されます。

プロパティの例 - 基本設定

簡単な例：

@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'
  };
}

完全な動作例：

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>
      
      
      <div id="configTarget" class="target-box">
        Right click or touch hold to open menu
      </div>
      
      
      <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'
  };
}

メニュー項目のプロパティ（MenuItemModel）

MenuItemModel は、各メニュー項目の構造を定義します。items 配列内の各項目は、このモデルに従います。

プロパティ	型	任意	説明
text	string	いいえ	必須。 メニュー項目のテキストを指定します。ユーザーに表示されるラベルです。
id	string	はい	メニュー項目の id を指定します。enableItems()、removeItems() などのメソッドで項目を識別するために使用します。
items	MenuItemModel[]	はい	MenuItem モデルの配列であるサブメニュー項目を指定します。ネストされた階層型のメニューを作成します。
separator	boolean	はい	メニュー項目間のセパレーターを指定します。セパレーターは、メニュー項目をグループ化するために使用する水平線または垂直線です。視覚的な区切り線を作成するには、true に設定します。
iconCss	string	はい	アイコンの表示に使用する、メニュー項目のクラスまたはスペースで区切られた複数のクラスを定義します。メニュー項目には、フォントアイコンとスプライト画像を含めることができます。例：iconCss: 'e-icons e-edit'。
url	string	はい	メニュー項目の URL を指定します。指定した URL に移動するアンカーリンクが作成されます。クリックすると、この URL に移動します。
htmlAttributes	Record<string, any>	はい	メニュー項目にカスタム属性を追加するための htmlAttributes プロパティを指定します。例：{ 'data-info': 'value', 'title': 'My Tooltip' }。

MenuItem の例 - 基本的な使い方

簡単な例：

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 },
  { text: 'Delete', id: 'delete', iconCss: 'e-icons e-delete' }
];

完全な実用例 - 複雑な MenuItemModel：

@Component({
  selector: 'app-menu-items-config',
  standalone: true,
  imports: [ContextMenuModule],
  template: `
    <div id="target">Right click for advanced menu</div>
    <ejs-contextmenu target='#target' [items]='menuItems'></ejs-contextmenu>
  `
})
export class MenuItemsComponent {
  menuItems: MenuItemModel[] = [
    // Item with icon
    {
      text: 'Edit',
      id: 'edit-item',
      iconCss: 'e-icons e-edit',
      htmlAttributes: {
        'data-action': 'edit',
        'title': 'Edit selected item'
      }
    },
    // Item with submenu
    {
      text: 'Format',
      id: 'format',
      iconCss: 'e-icons e-palette',
      items: [
        { text: 'Bold', id: 'bold' },
        { text: 'Italic', id: 'italic' },
        { text: 'Underline', id: 'underline' }
      ]
    },
    // Navigation item with URL
    {
      text: 'Visit Website',
      id: 'website',
      iconCss: 'e-icons e-export',
      url: 'https://example.com',
      htmlAttributes: { 'target': '_blank' }
    },
    // Separator
    { separator: true },
    // Item with nested submenu
    {
      text: 'Advanced',
      id: 'advanced',
      items: [
        {
          text: 'Settings',
          id: 'settings',
          items: [
            { text: 'General', id: 'general' },
            { text: 'Advanced', id: 'adv' }
          ]
        },
        { text: 'Help', id: 'help', url: 'https://help.example.com' }
      ]
    }
  ];
}

コンポーネントのメソッド

メソッド：enableItems

シグネチャ：

enableItems(items: string[], enable?: boolean, isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	string[]	いいえ	有効化または無効化する項目のテキストまたは id の配列です。
enable	boolean	はい、デフォルト：true	項目を有効化するには true に、無効化するには false に設定します。
isUniqueId	boolean	はい、デフォルト：false	items 配列にテキストではなく一意の id が含まれる場合は、true に設定します。

戻り値： void

簡単な例：

// Disable 'Delete' item by text
this.contextMenu.enableItems(['Delete'], false);

// Enable items by id
this.contextMenu.enableItems(['edit-item', 'copy-item'], true, true);

完全な実用例：

@Component({
  selector: 'app-enable-items',
  template: `
    <button (click)="disableDelete()">Disable Delete</button>
    <button (click)="enableAll()">Enable All</button>
    <div id="target">Right click here</div>
    <ejs-contextmenu #cm target='#target' [items]='items'></ejs-contextmenu>
  `
})
export class EnableItemsComponent {
  @ViewChild('cm') contextMenu!: ContextMenuComponent;
  items: MenuItemModel[] = [
    { text: 'Edit', id: 'edit' },
    { text: 'Delete', id: 'delete' },
    { text: 'Copy', id: 'copy' }
  ];
  
  disableDelete() {
    this.contextMenu.enableItems(['Delete'], false);
  }
  
  enableAll() {
    this.contextMenu.enableItems(['Edit', 'Delete', 'Copy'], true);
  }
}

メソッド：insertAfter

シグネチャ：

insertAfter(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	MenuItemModel[]	いいえ	挿入する MenuItemModel の配列です。
text	string	いいえ	要素を挿入する位置の基準となるメニュー項目のテキストです。isUniqueId が true の場合、これは一意の id です。
isUniqueId	boolean	はい、デフォルト：false	text が表示テキストではなく一意の id の場合は、true に設定します。

戻り値： void

簡単な例：

// Insert item after 'Edit'
this.contextMenu.insertAfter([{ text: 'Save' }], 'Edit');

// Insert after item with specific id
this.contextMenu.insertAfter([{ text: 'New', id: 'new-item' }], 'edit-item', true);

完全な実用例：

@Component({
  selector: 'app-insert-after',
  template: `
    <button (click)="addAfterEdit()">Add Item After Edit</button>
    <div id="target">Right click here</div>
    <ejs-contextmenu #cm target='#target' [items]='items'></ejs-contextmenu>
  `
})
export class InsertAfterComponent {
  @ViewChild('cm') contextMenu!: ContextMenuComponent;
  items: MenuItemModel[] = [
    { text: 'Edit', id: 'edit' },
    { text: 'Delete', id: 'delete' }
  ];
  
  addAfterEdit() {
    this.contextMenu.insertAfter(
      [
        { text: 'Copy', id: 'copy' },
        { text: 'Paste', id: 'paste' }
      ],
      'Edit'
    );
  }
}

メソッド：insertBefore

シグネチャ：

insertBefore(items: MenuItemModel[], text: string, isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	MenuItemModel[]	いいえ	挿入する MenuItemModel の配列です。
text	string	いいえ	要素を挿入する位置の基準となるメニュー項目のテキストです。isUniqueId が true の場合、これは一意の id です。
isUniqueId	boolean	はい、デフォルト：false	text が表示テキストではなく一意の id の場合は、true に設定します。

戻り値： void

簡単な例：

this.contextMenu.insertBefore([{ text: 'Undo' }], 'Edit');

メソッド：removeItems

シグネチャ：

removeItems(items: string[], isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	string[]	いいえ	削除する項目のテキストまたは id の配列です。
isUniqueId	boolean	はい、デフォルト：false	items 配列にテキストではなく一意の id が含まれる場合は、true に設定します。

戻り値： void

簡単な例：

this.contextMenu.removeItems(['Delete', 'Copy']);

メソッド：hideItems

シグネチャ：

hideItems(items: string[], isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	string[]	いいえ	非表示にする項目のテキストまたは ID の配列です。
isUniqueId	boolean	はい、デフォルト：false	items 配列にテキストではなく一意の ID が含まれている場合は、true に設定します。

戻り値： void

簡単な例：

this.contextMenu.hideItems(['AdminOnly'], true);

メソッド：showItems

シグネチャ：

showItems(items: string[], isUniqueId?: boolean): void

パラメーター	型	任意	説明
items	string[]	いいえ	表示する項目のテキストまたは ID の配列です。
isUniqueId	boolean	はい、デフォルト：false	items 配列にテキストではなく一意の ID が含まれている場合は、true に設定します。

戻り値： void

簡単な例：

this.contextMenu.showItems(['AdminOnly'], true);

メソッド：getItemIndex

シグネチャ：

getItemIndex(item: MenuItem | string, isUniqueId?: boolean): number[]

パラメーター	型	任意	説明
item	MenuItem | string	いいえ	インデックスを取得する MenuItem オブジェクト、または ID／テキストです。
isUniqueId	boolean	はい、デフォルト：false	item がテキストではなく一意の ID の場合は、true に設定します。

戻り値： number[] - メニュー階層内で項目がある位置を表すインデックスの配列です。

簡単な例：

// Get index by text
const index = this.contextMenu.getItemIndex('Edit'); // [0] for first item

// Get index by id
const index = this.contextMenu.getItemIndex('edit-item', true); // [0]

// For nested items
const index = this.contextMenu.getItemIndex('Bold', true); // [1, 0] for Format > Bold

完全な動作例：

@Component({
  selector: 'app-get-index',
  template: `
    <button (click)="findItem()">Find Item Index</button>
    <div>Index: {{ itemIndex }}</div>
    <div id="target">Right click here</div>
    <ejs-contextmenu #cm target='#target' [items]='items'></ejs-contextmenu>
  `
})
export class GetIndexComponent {
  @ViewChild('cm') contextMenu!: ContextMenuComponent;
  itemIndex: any = null;
  
  items: MenuItemModel[] = [
    { text: 'Edit', id: 'edit' },
    {
      text: 'Format',
      id: 'format',
      items: [
        { text: 'Bold', id: 'bold' },
        { text: 'Italic', id: 'italic' }
      ]
    }
  ];
  
  findItem() {
    this.itemIndex = this.contextMenu.getItemIndex('Bold', true);
    console.log('Item index:', this.itemIndex); // [1, 0]
  }
}

メソッド：setItem

シグネチャ：

setItem(item: MenuItem, id?: string, isUniqueId?: boolean): void

パラメーター	型	任意	説明
item	MenuItem	いいえ	更新されたプロパティを含む MenuItem オブジェクトです。
id	string	はい	更新する項目の ID またはテキストです。指定しない場合は、最初のパラメーターとして渡された項目を更新します。
isUniqueId	boolean	はい、デフォルト：false	id がテキストではなく一意の ID の場合は、true に設定します。

戻り値： void

簡単な例：

// Update item by text
this.contextMenu.setItem({ text: 'Edit Document' }, 'Edit');

// Update item by id
this.contextMenu.setItem(
  { text: 'Remove', iconCss: 'e-icons e-delete' },
  'delete-item',
  true
);

メソッド：open

シグネチャ：

open(top: number, left: number, target?: HTMLElement): void

パラメーター	型	任意	説明
top	number	いいえ	コンテキストメニューの垂直位置（ピクセル単位の Y 座標）を指定します。
left	number	いいえ	コンテキストメニューの水平位置（ピクセル単位の X 座標）を指定します。
target	HTMLElement	はい	指定されたターゲット要素に基づいて、コンテキストメニューの z-index を計算します。

戻り値： void

簡単な例：

// Open at mouse position
this.contextMenu.open(event.clientY, event.clientX);

// Open at specific coordinates
this.contextMenu.open(200, 300);

// Open relative to target element
this.contextMenu.open(100, 150, document.getElementById('target'));

メソッド：close

シグネチャ：

close(): void

パラメーター	-	-	-

戻り値： void

簡単な例：

// Close the open ContextMenu
this.contextMenu.close();

メソッド：destroy

シグネチャ：

destroy(): void

パラメーター	-	-	-

戻り値： void

簡単な例：

// Completely destroy the component and cleanup resources
this.contextMenu.destroy();

完全な動作例 - コンポーネントの破棄時に破棄：

import { Component, ViewChild, OnDestroy } from '@angular/core';
import { ContextMenuComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
  selector: 'app-destroy-example',
  template: `
    <button (click)="destroyMenu()">Destroy Menu</button>
    <div id="target">Right click here</div>
    <ejs-contextmenu #cm target='#target' [items]='items'></ejs-contextmenu>
  `
})
export class DestroyExampleComponent implements OnDestroy {
  @ViewChild('cm') contextMenu!: ContextMenuComponent;
  items: MenuItemModel[] = [{ text: 'Item 1' }];
  
  destroyMenu() {
    if (this.contextMenu) {
      this.contextMenu.destroy();
      console.log('Menu destroyed');
    }
  }
  
  ngOnDestroy() {
    // Cleanup when component is destroyed
    if (this.contextMenu) {
      this.contextMenu.destroy();
    }
  }
}

アニメーション設定（MenuAnimationSettingsModel）

メニュー項目を開閉するときのアニメーションを設定します。

プロパティ	型	デフォルト	説明
duration	number	400	メニューを変形／アニメーションする時間（ミリ秒）を指定します。例：300 ミリ秒のアニメーションでは 300 を指定します。
easing	string	'ease'	変形時に適用するイージング効果を指定します。例：'ease'、'ease-in'、'ease-out'、'ease-in-out'、'linear'、'cubic-bezier(0.25, 0.1, 0.25, 1)'。
effect	MenuEffect	'SlideDown'	サブメニューの変形時に表示する効果を指定します。選択肢：'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn'。

効果の選択肢：

• None：アニメーション効果なしでサブメニューを変形します。
• SlideDown：サブメニューを下方向にスライドさせながら変形します（デフォルト）。
• ZoomIn：サブメニューを拡大しながら変形します。
• FadeIn：サブメニューをフェードインさせながら変形します。

簡単な例：

animationSettings = {
  duration: 300,
  effect: 'FadeIn' as any,
  easing: 'ease-out'
};

完全な動作例：

@Component({
  selector: 'app-animation-config',
  template: `
    <div id="target">Right click here</div>
    <ejs-contextmenu 
      target='#target' 
      [items]='items'
      [animationSettings]='animSettings'>
    </ejs-contextmenu>
  `
})
export class AnimationConfigComponent {
  items: MenuItemModel[] = [
    { text: 'Option 1' },
    { text: 'Option 2' }
  ];
  
  animSettings = {
    effect: 'ZoomIn' as any,
    duration: 200,
    easing: 'ease-in-out'
  };
}

コンポーネントイベント

Event: beforeOpen

シグネチャ: (beforeOpen): EmitType<BeforeOpenCloseMenuEventArgs>

メニュー項目を開く前に実行されます。メニューが開くのを防止したり、コンテキストに応じて項目を表示または非表示にしたり、表示前にメニューをカスタマイズしたりするために使用します。

イベント引数 - BeforeOpenCloseMenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'beforeOpen'）。

簡単な例:

onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
  console.log('Menu about to open');
}

完全な動作例:

@Component({
  selector: 'app-before-open',
  template: `
    <div id="target">Right click to open</div>
    <ejs-contextmenu 
      target='#target' 
      [items]='items'
      (beforeOpen)='onBeforeOpen($event)'>
    </ejs-contextmenu>
  `
})
export class BeforeOpenComponent {
  items: MenuItemModel[] = [{ text: 'Item 1' }];
  
  onBeforeOpen(args: BeforeOpenCloseMenuEventArgs) {
    console.log('Event:', args.name); // 'beforeOpen'
  }
}

Event: beforeClose

シグネチャ: (beforeClose): EmitType<BeforeOpenCloseMenuEventArgs>

メニューを閉じる前に実行されます。クリーンアップを行ったり、メニューが閉じるのを防止したりするために使用します。

イベント引数 - BeforeOpenCloseMenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'beforeClose'）。

簡単な例:

onBeforeClose(args: BeforeOpenCloseMenuEventArgs) {
  console.log('Menu about to close');
}

Event: onOpen

シグネチャ: (onOpen): EmitType<OpenCloseMenuEventArgs>

メニュー項目を開いている間に実行されます。このイベントは、メニューが開いて表示された後に発生します。

イベント引数 - OpenCloseMenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'onOpen'）。

簡単な例:

onOpen(args: OpenCloseMenuEventArgs) {
  console.log('Menu opened:', args.name);
}

完全な動作例:

@Component({
  selector: 'app-open-event',
  template: `
    <div id="target">Right click here</div>
    <ejs-contextmenu 
      target='#target' 
      [items]='items'
      (onOpen)='onOpen($event)'
      (onClose)='onClose($event)'>
    </ejs-contextmenu>
    <p>Status: {{ menuStatus }}</p>
  `
})
export class OpenEventComponent {
  items: MenuItemModel[] = [{ text: 'Item 1' }];
  menuStatus = 'Closed';
  
  onOpen(args: OpenCloseMenuEventArgs) {
    this.menuStatus = 'Menu Opened - ' + args.name;
  }
  
  onClose(args: OpenCloseMenuEventArgs) {
    this.menuStatus = 'Menu Closed - ' + args.name;
  }
}

Event: onClose

シグネチャ: (onClose): EmitType<OpenCloseMenuEventArgs>

メニューを閉じている間に実行されます。このイベントは、メニューが閉じて表示されなくなった後に発生します。

イベント引数 - OpenCloseMenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'onClose'）。

簡単な例:

onClose(args: OpenCloseMenuEventArgs) {
  console.log('Menu closed:', args.name);
}

Event: select

シグネチャ: (select): EmitType<MenuEventArgs>

メニュー項目を選択したときに実行されます。メニュー項目のクリックを処理し、アクションを実行するために使用します。

イベント引数 - MenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'select'）。

簡単な例:

onSelect(args: MenuEventArgs) {
  console.log('Item selected:', args.name);
}

完全な動作例:

@Component({
  selector: 'app-select-event',
  template: `
    <div id="target">Right click here</div>
    <ejs-contextmenu 
      target='#target' 
      [items]='items'
      (select)='onSelect($event)'>
    </ejs-contextmenu>
    <p>Selected: {{ selectedItem }}</p>
  `
})
export class SelectEventComponent {
  items: MenuItemModel[] = [
    { text: 'Edit', id: 'edit' },
    { text: 'Delete', id: 'delete' },
    { text: 'Copy', id: 'copy' }
  ];
  
  selectedItem = 'None';
  
  onSelect(args: MenuEventArgs) {
    this.selectedItem = args.name;
    console.log('Selected item event:', args.name);
  }
}

Event: beforeItemRender

シグネチャ: (beforeItemRender): EmitType<MenuEventArgs>

各メニュー項目の描画中に実行されます。描画前に各項目の外観や動作をカスタマイズするために使用します。

イベント引数 - MenuEventArgs:

Property	Type	Description
name	string	イベント名を指定します（値：'beforeItemRender'）。

簡単な例:

onBeforeItemRender(args: MenuEventArgs) {
  console.log('Rendering item:', args.name);
}

完全な動作例:

@Component({
  selector: 'app-before-item-render',
  template: `
    <div id="target">Right click here</div>
    <ejs-contextmenu 
      target='#target' 
      [items]='items'
      (beforeItemRender)='onBeforeItemRender($event)'>
    </ejs-contextmenu>
  `
})
export class BeforeItemRenderComponent {
  items: MenuItemModel[] = [
    { text: 'Edit', id: 'edit' },
    { text: 'Delete', id: 'delete' }
  ];
  
  onBeforeItemRender(args: MenuEventArgs) {
    console.log('Rendering:', args.name);
    // Customize items before rendering
  }
}

Event: created

シグネチャ: (created): EmitType<Event>

コンポーネントの描画が完了したときに一度だけ実行されます。初期化後のセットアップに使用します。

イベント引数:

Property	Type	Description
-	Event	標準の JavaScript Event オブジェクトです。

簡単な例:

onCreated(event: Event) {
  console.log('ContextMenu component created and ready');
}

---

主なプロパティとイベントのクイックリファレンス

Property/Event	Purpose	Example
items	メニュー構造を定義	items: MenuItemModel[]
target	メニューを起動する要素	target='#target'
select	メニュー項目のクリック	(select)="onSelect($event)"
beforeOpen	メニューが開く前	(beforeOpen)="onBeforeOpen($event)"
enableItems()	項目の有効／無効を切り替え	enableItems(['Edit'], false)
insertAfter()	対象の後に項目を追加	insertAfter([...], 'Refresh')
hideItems()	特定の項目を非表示にする	hideItems(['Cut', 'Copy'])
animationSettings	表示効果を制御	animationSettings: {...}

一般的なユースケース

1. ファイル操作メニュー - 切り取り、コピー、貼り付け、削除のオプション
2. コンテンツエディターメニュー - 書式設定、挿入、リンク、メディアのオプション
3. データグリッドのコンテキストメニュー - 編集、削除、エクスポート、フィルターの操作
4. ナビゲーションメニュー - ページまたは外部 URL へのリンク
5. 権限ベースのメニュー - ユーザーの役割に応じて項目を表示／非表示
6. 多言語メニュー - 翻訳から動的に項目のテキストを設定
7. 確認ダイアログ - アクションを実行する前にダイアログを開く
8. テーブル操作 - データテーブル内の行／列の管理

次のステップ

1. タスクに応じて参考ファイルを選択します（はじめに、メニュー管理、データバインディング、イベント、スタイル設定、またはテンプレート）
2. 具体的なユースケースのコード例を確認します
3. 関連するコードパターンをプロジェクトにコピーします
4. アプリケーションの用途に合わせてメニュー項目をカスタマイズします
5. さまざまな対象要素で操作をテストします

---

具体的なタスクについてお困りですか？ 上記の該当するガイドを参照し、実装しているメニュー機能をお知らせください。