syncfusion-angular-dialog

ダイアログの実装

Dialog コンポーネントは、ユーザーに情報を表示し、ユーザー入力を取得するために使用するウィンドウです。モーダルダイアログ（親との操作をブロック）とモードレスダイアログ（親との操作を許可）の両方に対応しています。

コンポーネントの概要

主な機能

• モーダル／モードレスモード - 親との操作をブロックまたは許可
• テンプレート - ヘッダー、コンテンツ、フッターをカスタマイズ可能
• 配置 - 組み込みの9種類の位置またはカスタム配置
• アニメーション - スムーズな開閉エフェクト（Fade、Zoom、Slide）
• ドラッグ／サイズ変更 - ユーザーによるダイアログの移動とサイズ変更に対応
• フォーム連携 - リアクティブフォームとテンプレート駆動型フォーム
• アクセシビリティ - ARIA による WCAG 2.2 Level AA の完全サポート
• キーボード操作 - Tab、Escape、Enter、矢印キー
• レスポンシブ対応 - モバイル端末での全画面表示モード

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

Dialog の機能を実装する際は、以下のリファレンスを参照してください。

はじめに

📄 参照: references/getting-started.md

• Angular 21+ でのインストールとセットアップ
• 基本的なダイアログの実装
• CSS のインポートとテーマ
• ダイアログの開閉
• 組み込みのボタン対応

ダイアログのモードと種類

📄 参照: references/modal-vs-modeless.md

• モーダルダイアログの動作（親との操作をブロック）
• モードレスダイアログの動作（親との操作を許可）
• 各モードのユースケースと使い分け
• モードの切り替え
• オーバーレイのカスタマイズとスタイル設定

コンテンツとテンプレート

📄 参照: references/templates-and-content.md

• ヘッダーテンプレートとカスタマイズ
• 文字列、HTML、ng-template によるコンテンツ
• ボタン付きのフッターテンプレート
• 動的なコンテンツに対する ng-content の使用
• ボタンのバインドとクリックイベント
• 動的なボタン配列

配置とサイズ

📄 参照: references/positioning-and-sizing.md

• 組み込みの位置（上、中央、下など9か所）
• X、Y 座標によるカスタム配置
• 幅と高さの設定
• 高さの最小値／最大値の制約
• さまざまな画面サイズに応じたレスポンシブなサイズ設定
• モバイル端末での全画面表示モード

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

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

• CSS クラスのカスタマイズ（ヘッダー、コンテンツ、フッター、オーバーレイ）
• テーマとの連携（Material、Bootstrap、Tailwind、Fluent）
• ダークモード対応
• アニメーション効果（Fade、Zoom、SlideLeft、SlideRight など）
• アイコンのカスタマイズ（閉じるボタン、サイズ変更ハンドル）
• RTL（右から左）言語への対応

アクセシビリティとフォーム

📄 参照: references/accessibility-and-forms.md

• WCAG 2.2 Level AA 準拠基準
• ARIA 属性（aria-labelledby、aria-describedby、aria-modal、aria-grabbed）
• キーボード操作のパターン（Tab、Shift+Tab、Escape、Enter）
• スクリーンリーダーへの対応とベストプラクティス
• FormValidator によるフォーム検証
• リアクティブフォームのパターン
• テンプレート駆動型フォームのパターン
• カスタム検証ルールとエラー処理

操作とイベント

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

• ダイアログの開閉イベント
• ドラッグ可能なダイアログ（ユーザーによるダイアログの移動に対応）
• サイズ変更可能なダイアログ（ユーザーによるサイズ変更に対応）
• ボタンクリックイベントと処理
• コンテンツ操作のパターン
• ダイアログの閉鎖を防止する方法
• フォーカス管理
• ダイアログのライフサイクルイベント

高度なパターン

📄 参照: references/advanced-patterns.md

• ネストされたダイアログ（ダイアログ内のダイアログ）
• Ajax で読み込む動的コンテンツ
• プログラムによる作成のためのユーティリティ関数
• 複雑なレイアウト（リッチテキストエディター、複数ステップのフォーム）
• スクロール処理と自動中央配置
• カスタムイベントエミッター
• ルーティング連携のパターン

API リファレンス（完全版）

📄 参照先： api-reference.md

• Dialog API の完全なドキュメント
• 有効なすべてのプロパティと型、使用例
• すべてのメソッド（show、hide、refresh、destroy）
• すべてのイベント（beforeOpen、beforeClose、drag、resize など）
• インターフェイスとモデル（AnimationSettingsModel、ButtonPropsModel など）
• 有効な列挙型（DialogEffect、ResizeDirections）
• Syncfusion 公式ドキュメントへのリンク

クイックスタートの例

基本的なモーダルダイアログを開く最小限の例を紹介します。

import { Component, ViewChild } from '@angular/core';
import { DialogModule, DialogComponent } from '@syncfusion/ej2-angular-popups';

@Component({
  selector: 'app-root',
  imports: [DialogModule],
  template: `
    <div id="dialog-container" style="height: 500px;">
      <button class="e-control e-btn" (click)="onOpenDialog()">
        Open Dialog
      </button>
      
      <ejs-dialog 
        #ejDialog
        target="#dialog-container"
        [showCloseIcon]="true"
        width="400px"
        content="This is a Dialog content"
      >
        <ng-template #header>
          <div class="e-dlg-header-content">
            <span>Dialog Title</span>
          </div>
        </ng-template>
      </ejs-dialog>
    </div>
  `
})
export class AppComponent {
  @ViewChild('ejDialog') ejDialog!: DialogComponent;

  onOpenDialog(): void {
    this.ejDialog.show();
  }
}

CSS：

#dialog-container {
  height: 500px;
}

よく使われるパターン

パターン 1：モーダル確認ダイアログ

// Create a modal dialog for confirmation
<ejs-dialog 
  [isModal]="true"
  [showCloseIcon]="true"
  width="350px"
  content="Are you sure you want to delete this item?"
>
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onConfirm()">
      Yes, Delete
    </button>
    <button class="e-control e-btn" (click)="onCancel()">
      Cancel
    </button>
  </ng-template>
</ejs-dialog>

パターン 2：フォーム付きダイアログ（リアクティブフォーム）

// Dialog containing a reactive form
<ejs-dialog [showCloseIcon]="true" width="450px">
  <form [formGroup]="form">
    <div class="e-dlg-content">
      <input formControlName="name" placeholder="Enter name" />
      <input formControlName="email" placeholder="Enter email" />
    </div>
  </form>
  
  <ng-template #footer>
    <button class="e-control e-btn e-primary" (click)="onSubmit()">
      Submit
    </button>
  </ng-template>
</ejs-dialog>

パターン 3：位置を指定したダイアログ

// Dialog positioned at a specific location
<ejs-dialog 
  [position]="{ X: 100, Y: 50 }"
  width="400px"
  content="Positioned Dialog"
>
</ejs-dialog>

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

プロパティ	型	目的	例
isModal	boolean	親要素との操作をブロックする	[isModal]="true"
showCloseIcon	boolean	ヘッダーに閉じるボタンを表示する	[showCloseIcon]="true"
width	string | number	ダイアログの幅を設定する	width="400px"
height	string | number	ダイアログの高さを設定する	height="300px"
minHeight	string | number	最小の高さを指定する	[minHeight]="200"
position	PositionDataModel	位置（X、Y）またはプリセットを設定する	[position]="{ X: 'center', Y: 'center' }"
target	HTMLElement | string	コンテナー要素を設定する	target="#container"
content	string | HTMLElement	コンテンツのテキストまたは HTML を設定する	content="Hello"
header	string | HTMLElement	ヘッダーのテキストまたは要素を設定する	header="Title"
buttons	ButtonPropsModel[]	フッターボタンを追加する	[buttons]="buttonArray"
closeOnEscape	boolean	Escape キーで閉じる	[closeOnEscape]="true"
allowDragging	boolean	ヘッダーのドラッグを有効にする	[allowDragging]="true"
enableResize	boolean	サイズ変更を有効にする	[enableResize]="true"
resizeHandles	ResizeDirections[]	サイズ変更の方向を指定する	[resizeHandles]="['All']"
cssClass	string	カスタム CSS クラスを指定する	cssClass="custom-dialog"
animationSettings	AnimationSettingsModel	アニメーションを設定する	[animationSettings]="{ effect: 'FadeZoom' }"
enablePersistence	boolean	再読み込み後も状態を保持する	[enablePersistence]="true"
zIndex	number	重ね合わせ順を設定する	[zIndex]="1000"

よくある使用例

1. 削除前の確認 - 削除を確認するようユーザーに求めるモーダルダイアログ
2. フォーム送信 - ユーザーがデータを送信するためのフォーム付きダイアログ
3. アラートと通知 - 重要な情報をユーザーに表示する
4. 複数ステップの処理 - ワークフローにネストされたダイアログを使用する
5. 設定パネル - 操作を妨げない設定用のモードレスダイアログ
6. ヘルプとガイダンス - ドラッグ可能なダイアログでヘルプコンテンツを表示する
7. 読み込み状態 - 処理中の進行状況をダイアログに表示する
8. エラー処理 - モーダルでエラーメッセージを表示する

---

関連スキル

• ダイアログのアニメーション - 開閉アニメーションをカスタマイズする
• フォームの検証 - ダイアログ内のユーザー入力を検証する
• ルーティングとの連携 - Angular のルーティングでダイアログを使用する