syncfusion-angular-popups

Syncfusion Angular Popups の実装

Dialog

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

コンポーネントの概要

主な機能

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

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

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

はじめに

📄 参照: references/dialog-getting-started.md

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

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

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

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

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

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

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

配置とサイズ設定

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

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

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

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

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

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

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

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

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

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

• ダイアログの開閉イベント
• ドラッグ可能なダイアログ（ダイアログの移動を可能にします）
• サイズ変更可能なダイアログ（サイズ変更を可能にします）
• ボタンのクリックイベントと処理
• コンテンツのインタラクションパターン
• ダイアログが閉じないようにする方法
• フォーカス管理
• ダイアログのライフサイクルイベント

高度なパターン

📄 参照: references/dialog-advanced-patterns.md

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

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

📄 参照: references/dialog-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 #footerTemplate>
    <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 #footerTemplate>
    <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	レイヤー表示の Z 順を設定します	[zIndex]="1000"

よくあるユースケース

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

---

関連スキル

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

定義済みダイアログ

このスキルでは、Syncfusion の DialogUtility を使用して、アラート、確認、プロンプトの各ダイアログを構築する方法を説明します。これは、Angular アプリケーションでモーダルによるフィードバックやユーザー入力用のダイアログを表示する、テンプレート不要でユーティリティを優先するアプローチです。

どのダイアログタイプを選ぶべきですか？

用途	ダイアログタイプ	API
ユーザーへの警告・情報表示、OK のみ	Alert	DialogUtility.alert(...)
確認を求める（OK ＋ Cancel）	Confirm	DialogUtility.confirm(...)
ユーザー入力を取得する（HTML コンテンツ ＋ OK ＋ Cancel）	Prompt	content に入力欄を指定して DialogUtility.confirm(...)

重要なポイント： Angular の定義済みダイアログには、独立した「prompt」メソッドはありません。content プロパティにカスタム HTML を指定して DialogUtility.confirm() を使い、プロンプトのパターンを作成します。

クイックスタート

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts
import { Component } from '@angular/core';
import { DialogModule } from '@syncfusion/ej2-angular-popups';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DialogUtility } from '@syncfusion/ej2-popups';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DialogModule, ButtonModule],
  template: `
    <button ejs-button cssClass="e-danger" (click)="showAlert()">Alert</button>
    <button ejs-button cssClass="e-success" (click)="showConfirm()" style="margin-left:8px">Confirm</button>
    <button ejs-button [isPrimary]="true" (click)="showPrompt()" style="margin-left:8px">Prompt</button>
  `
})
export class App {
  showAlert(): void {
    DialogUtility.alert({
      title: 'Warning',
      content: 'Disk space is running low.',
      width: '280px'
    });
  }

  showConfirm(): void {
    const dlg = DialogUtility.confirm({
      title: 'Delete Item',
      content: 'Are you sure you want to delete this item?',
      width: '300px',
      okButton: { text: 'Yes', click: () => { dlg.hide(); /* handle confirm */ } },
      cancelButton: { text: 'No', click: () => { dlg.hide(); } }
    });
  }

  showPrompt(): void {
    const dlg = DialogUtility.confirm({
      title: 'Enter Name',
      content: '<p>Your name:</p><input id="nameInput" class="e-input" type="text" placeholder="Type here..." />',
      width: '300px',
      okButton: {
        text: 'Submit',
        click: () => {
          const value = (document.getElementById('nameInput') as HTMLInputElement).value;
          dlg.hide();
          // use value
        }
      },
      cancelButton: { text: 'Cancel', click: () => dlg.hide() }
    });
  }
}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-icons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-popups/styles/material3.css';

よく使われるパターン

パターン 1 — アイコン付きの削除確認：

DialogUtility.confirm({
  title: 'Delete Files',
  content: 'Permanently delete selected files?',
  width: '300px',
  okButton: { text: 'Yes', icon: 'e-icons e-check' },
  cancelButton: { text: 'No', icon: 'e-icons e-close' }
});

パターン 2 — 閉じるボタンと ESC 対応のアラート：

DialogUtility.alert({
  title: 'Session Expired',
  content: 'Your session has expired. Please log in again.',
  width: '300px',
  showCloseIcon: true,
  closeOnEscape: true
});

パターン 3 — 配置を指定したモーダル確認：

DialogUtility.confirm({
  title: 'Confirm Action',
  content: 'Submit the form?',
  isModal: true,
  position: { X: 'center', Y: 'center' },
  animationSettings: { effect: 'Zoom' },
  isDraggable: true,
  width: '280px'
});

主なプロパティ一覧

プロパティ	用途	デフォルト
title	ダイアログのヘッダーテキスト	—
content	本文テキストまたは HTML 文字列	—
width	ダイアログの幅（px または %）	'100%'
isModal	オーバーレイとモーダル動作	false
isDraggable	ヘッダーをドラッグして位置を変更できるようにする	false
showCloseIcon	× の閉じるボタンを表示する	false
closeOnEscape	ESC キーで閉じる	false
position	{ X, Y } — 定義済みの位置またはオフセット	center/center
animationSettings	{ effect, duration, delay }	Fade, 400ms
okButton	OK ボタンの設定 { text, icon, click }	—
cancelButton	Cancel ボタンの設定 { text, icon, click }	—
cssClass	ダイアログのルートに適用するカスタム CSS クラス	''
zIndex	重なり順	1000
open	ダイアログが開いた後に実行するコールバック	—
close	ダイアログが閉じた後に実行するコールバック	—

ドキュメント

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定
• CSS のインポートとテーマのオプション
• alert、confirm、prompt の基本的な例
• DialogUtility のすべてのオプションプロパティ

カスタマイズ

📄 参照： references/customization.md

• ボタンのテキストとアイコンのカスタマイズ
• 閉じるアイコンの表示・非表示と ESC の動作
• ダイアログ内のカスタム HTML コンテンツ
• hide() によるプログラムからのダイアログのクローズ

位置とサイズ

📄 参照： references/position-and-dimension.md

• 位置の X/Y 値とオフセットの使用方法
• 幅と高さのプロパティ
• cssClass による最大幅・最大高さの指定
• cssClass による最小幅・最小高さの指定

アニメーションとドラッグ操作

📄 参照： references/animation-and-draggable.md

• animationSettings のエフェクトオプション（Zoom、Fade、FadeZoom など）
• 期間と遅延の設定
• すべてのダイアログタイプでの isDraggable の使用

イベントとパターン

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

• open イベントと close イベントのコールバック
• isModal、zIndex、cssClass の高度な使用方法
• 実際によく使われるパターン（削除確認、フォームプロンプト、情報アラート）
• 複数のダイアログインスタンスの管理

API リファレンス

📄 参照： references/api.md

• DialogUtility.alert() と DialogUtility.confirm() のすべてのオプション
• okButton / cancelButton の ButtonArgs プロパティ
• AnimationSettingsModel のプロパティ
• PositionDataModel のプロパティ
• DialogComponent のプロパティ、メソッド、イベント

ツールチップ

Syncfusion Angular Tooltip（ejs-tooltip）は、対象の要素にマウスを重ねる、クリックする、フォーカスする、またはタッチすると、情報やメッセージをポップアップで表示します。12 種類の位置、アニメーション、HTML／テンプレート／AJAX コンテンツ、スティッキーモード、マウス追従、および完全なアクセシビリティ対応を備えています。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• インストールとパッケージの設定（ng add @syncfusion/ej2-angular-popups）
• CSS テーマのインポート
• 基本的な単一ターゲットのツールチップ
• target プロパティを使った複数ターゲットのツールチップ
• スタンドアロン（Angular 19 以降）とモジュールベースの設定

コンテンツ

📄 参照： references/content.md

• 静的テキストと HTML 文字列のコンテンツ
• ng-template を使ったテンプレートコンテンツ
• beforeRender イベントでの AJAX／Fetch による動的コンテンツ
• ツールチップ内での HTML 要素（iframe、動画）の読み込み
• enableHtmlParse と enableHtmlSanitizer オプション

位置と寸法

📄 参照： references/position-and-dimension.md

• 12 種類すべての位置指定（TopCenter、BottomLeft など）
• 先端ポインターの表示／非表示と位置
• マウス追従
• オフセット値（offsetX、offsetY）
• 幅、高さ、スクロールモード
• ウィンドウとの衝突処理

開くモード

📄 参照： references/open-mode.md

• opensOn：Auto、Hover、Click、Focus、Custom
• 複数の開くモードの組み合わせ
• プログラムによる open()／close() を使った Custom モード
• 固定モード（isSticky）
• 開く／閉じるまでの遅延

アニメーション

📄 参照： references/animation.md

• 開閉設定を指定する animation プロパティ
• サポートされるすべてのアニメーション効果
• open()／close() メソッドによるアニメーションの適用
• カスタムトランジション効果

カスタマイズとスタイル

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

• カスタムスタイル用の cssClass
• ツールチップの構造に使われる CSS クラスのリファレンス
• 先端ポインターのカスタマイズ
• 装飾的な先端（曲線、吹き出し）
• SVG と canvas のツールチップ
• 無効な要素上のツールチップ
• コンテナー、RTL、htmlAttributes

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2、Section 508 への準拠
• WAI-ARIA 属性
• キーボード操作
• スクリーンリーダーのサポート

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ、メソッド、イベント
• 型定義とデフォルト値
• TooltipEventArgs、AnimationModel、TooltipAnimationSettings
• Position、TipPointerPosition、Effect 列挙型

クイックスタート

ng add @syncfusion/ej2-angular-popups

// src/app/app.ts (Angular 19+ standalone)
import { Component, ViewEncapsulation } from '@angular/core';
import { TooltipModule } from '@syncfusion/ej2-angular-popups';

@Component({
  standalone: true,
  imports: [TooltipModule],
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  template: `
    <ejs-tooltip content="Hello, I am a Tooltip!" position="BottomCenter">
      <button>Hover me</button>
    </ejs-tooltip>
  `
})
export class App {}

/* styles.css */
@import "@syncfusion/ej2-base/styles/material3.css";
@import "@syncfusion/ej2-angular-buttons/styles/material3.css";
@import "@syncfusion/ej2-angular-popups/styles/material3.css";

よく使われるパターン

複数ターゲットのツールチップ（単一インスタンス）

<ejs-tooltip target=".has-tip">
  <div id="container">
    <button class="has-tip" title="Save your work">Save</button>
    <button class="has-tip" title="Delete selected item">Delete</button>
    <button>No tooltip here</button>
  </div>
</ejs-tooltip>

クリックで開くツールチップ

<ejs-tooltip content="Clicked!" opensOn="Click" position="RightCenter">
  <button>Click me</button>
</ejs-tooltip>

閉じるボタン付きの固定ツールチップ

<ejs-tooltip content="I stay until you close me." [isSticky]="true">
  <span>Hover and pin me</span>
</ejs-tooltip>

HTML コンテンツのツールチップ

public htmlContent: string = '<b>Bold</b> and <i>italic</i> text with a <a href="#">link</a>.';

<ejs-tooltip [content]="htmlContent">
  <button>Rich content</button>
</ejs-tooltip>

プログラムによる開閉（カスタムモード）

@ViewChild('tooltip') tooltip!: TooltipComponent;

openTip(): void {
  this.tooltip.open(this.tooltip.element);
}
closeTip(): void {
  this.tooltip.close();
}

<ejs-tooltip #tooltip content="Custom trigger" opensOn="Custom">
  <span>Target</span>
</ejs-tooltip>
<button (click)="openTip()">Show</button>
<button (click)="closeTip()">Hide</button>

主なプロパティ一覧

プロパティ	型	デフォルト値	用途
content	string | HTMLElement	—	ツールチップのコンテンツ
position	Position	'TopCenter'	ツールチップの表示位置
opensOn	string	'Auto'	トリガー：Auto／Hover／Click／Focus／Custom
isSticky	boolean	false	手動で閉じるまで開いた状態を維持
mouseTrail	boolean	false	マウスポインターに追従
openDelay	number	0	開くまでの遅延（ms）
closeDelay	number	0	閉じるまでの遅延（ms）
animation	AnimationModel	FadeIn/FadeOut 150ms	開閉アニメーション
target	string	—	複数ターゲット用のセレクター
cssClass	string	null	カスタム CSS クラス
showTipPointer	boolean	true	矢印型の先端を表示／非表示
width / height	string | number	'auto'	寸法

プロパティ、メソッド、イベントの全リファレンスについては、references/api.md を参照してください。