syncfusion-angular-notifications

Syncfusion Angular 通知の実装

---

メッセージ

Syncfusion Angular Message コンポーネント（ejs-message）は、重要度をユーザーに伝えるために、重要度に応じたアイコンと色でコンテキストメッセージを表示します。複数の重要度タイプ、ビジュアルバリアント、閉じるアイコン、カスタムテンプレート、コンテンツの配置、CSS のカスタマイズ、および完全なアクセシビリティ対応をサポートしています。

パッケージ： @syncfusion/ej2-angular-notifications
モジュール： MessageModule
セレクター： ejs-message

---

📋 references/ 配下にリンクされているすべてのファイルは読み取り専用のドキュメントであり、このスキルと同じセキュリティポリシーに準拠しています。

ナビゲーションガイド

はじめに

📄 参照： references/message-getting-started.md

• ng add を使用した @syncfusion/ej2-angular-notifications のインストール
• CSS/SCSS テーマのインポート（Material3）
• スタンドアロンコンポーネントへの MessageModule のインポート
• 最小限の ejs-message テンプレートの設定
• アプリケーションの実行

重要度タイプ

📄 参照： references/message-severities.md

• 5 つの値（Normal、Success、Info、Warning、Error）を持つ severity プロパティ
• デフォルトの重要度（Normal）
• 各重要度タイプを選ぶタイミング
• すべての重要度を含むコード例

ビジュアルバリアント

📄 参照： references/message-variants.md

• variant プロパティ：Text、Outlined、Filled
• デフォルトのバリアント（Text）
• バリアントと重要度の組み合わせ
• すべての組み合わせを示す全体例

アイコンと閉じるアイコン

📄 参照： references/message-icons.md

• showIcon — 重要度アイコンの表示／非表示
• showCloseIcon — メッセージを閉じるためのアイコンを追加
• (closed) イベント — ユーザーがメッセージを閉じたときの処理
• visible プロパティによる表示状態の復元
• cssClass を使用したカスタムアイコン

カスタマイズとテンプレート

📄 参照： references/message-customization.md

• コンテンツの配置：左（デフォルト）、中央（e-content-center）、右（e-content-right）
• cssClass による角丸および四角い境界線のスタイル
• CSS のみでのメッセージ描画（スクリプト参照なし）
• 手動で DOM 構造を作成するための定義済み CSS クラス
• <ng-template #content> によるリッチ HTML テンプレート

アクセシビリティ

📄 参照： references/message-accessibility.md

• WCAG 2.2 / Section 508 準拠
• WAI-ARIA 属性（role=alert、aria-label）
• キーボード操作（Tab、閉じるアイコンの Enter/Space）
• enableRtl による RTL サポート
• スクリーンリーダーの動作

API リファレンス

📄 参照： references/message-api.md

• すべてのプロパティ：content、cssClass、enablePersistence、enableRtl、locale、severity、showCloseIcon、showIcon、variant、visible
• メソッド：destroy()、getPersistData()
• イベント：closed、created、destroyed

---

クイックスタート

ng add @syncfusion/ej2-angular-notifications

/* styles.css – added automatically by ng add */
/* NOTE: These are consumer-side stylesheet references only; no packages are installed or executed by this skill. */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-notifications/styles/message/material3.css';

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: '<ejs-message content="Please read the comments carefully"></ejs-message>'
})
export class AppComponent { }

---

よくあるパターン

重要度付きメッセージ

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Editing is restricted"></ejs-message>
    <ejs-message content="Please read the comments carefully" severity="Info"></ejs-message>
    <ejs-message content="Your message has been sent successfully" severity="Success"></ejs-message>
    <ejs-message content="There was a problem with your network connection" severity="Warning"></ejs-message>
    <ejs-message content="A problem occurred while submitting your data" severity="Error"></ejs-message>
  `
})
export class AppComponent { }

閉じるアイコン付きの閉じられるメッセージ

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component, ViewChild } from '@angular/core';
import { MessageComponent } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message #msg severity="Warning" [showCloseIcon]="true" (closed)="onClosed()">
      There was a problem with your network connection
    </ejs-message>
    <button *ngIf="isClosed" (click)="reopen()">Show again</button>
  `
})
export class AppComponent {
  @ViewChild('msg') msg!: MessageComponent;
  isClosed = false;

  onClosed(): void {
    this.isClosed = true;
  }

  reopen(): void {
    this.msg.visible = true;
    this.isClosed = false;
  }
}

重要度付きの Filled バリアント

import { MessageModule } from '@syncfusion/ej2-angular-notifications';
import { Component } from '@angular/core';

@Component({
  imports: [MessageModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-message content="Your message has been sent successfully"
      severity="Success" variant="Filled">
    </ejs-message>
  `
})
export class AppComponent { }

---

主なプロパティの概要

プロパティ	型	デフォルト	用途
content	string | object	null	表示するテキスト、HTML、またはテンプレートコンテンツ
severity	string	'Normal'	重大度の種類：Normal、Success、Info、Warning、Error
variant	string	'Text'	表示スタイル：Text、Outlined、Filled
showIcon	boolean	true	重大度アイコンの表示／非表示
showCloseIcon	boolean	false	閉じるアイコンの表示／非表示
visible	boolean	true	メッセージ全体の表示／非表示
cssClass	string	''	ルート要素に追加するカスタム CSS クラス
enableRtl	boolean	false	右から左へのレンダリング
enablePersistence	boolean	false	ページの再読み込み後もコンポーネントの状態を保持
locale	string	''	グローバルなカルチャ／ローカライズ設定を上書き

---

Skeleton

Skeleton コンポーネントは、読み込み中またはまだレンダリングされていないコンテンツの視覚的なプレースホルダーを提供します。これから表示されるコンテンツをユーザーに示すことで、体感パフォーマンスを向上させ、読み込み中の認知的負荷を軽減します。

パッケージ： @syncfusion/ej2-angular-notifications
モジュール： SkeletonModule
セレクター： ejs-skeleton

📋 references/ 以下にリンクされているすべてのファイルは読み取り専用のドキュメントであり、このスキルと同じセキュリティポリシーに準拠しています。

ナビゲーションガイド

はじめに

📄 参照： references/skeleton-getting-started.md

• インストールとパッケージのセットアップ
• 依存関係と CSS のインポート
• 基本的なスケルトンの実装
• Angular 19 以降のスタンドアロンアーキテクチャ
• Skeleton を使用したアプリケーションの実行

形状とレイアウトの設計

📄 参照： references/skeleton-shapes.md

• アバターやプロフィール写真向けの円形
• サムネイルやアイコン向けの正方形
• 画像やカード向けの長方形
• 段落やコンテンツ向けのテキスト形状
• 形状を組み合わせた完全なレイアウトの構築
• レスポンシブなサイズ設定とデザイン

シマー効果とアニメーション

📄 参照： references/skeleton-shimmer-effects.md

• ウェーブ効果（デフォルトのアニメーション）
• パルス効果（フェードイン／アウトアニメーション）
• フェード効果（不透明度の変化を伴うアニメーション）
• 効果の動的な変更
• 複数のスケルトンを使用する際のパフォーマンスに関する考慮事項

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

📄 参照： references/skeleton-styles-customization.md

• カスタムスタイルへの cssClass の使用
• ウェーブ／背景色のカスタマイズ
• 幅と高さの設定
• visible プロパティによる表示の制御
• テーマ設定用の CSS 変数
• Theme Studio との連携

アクセシビリティ機能

📄 参照： references/skeleton-accessibility.md

• WCAG 2.2 および Section 508 への準拠
• スクリーンリーダーのサポートとライブリージョン
• WAI-ARIA 属性（role、aria-label、aria-live、aria-busy）
• 右から左への（RTL）サポート
• キーボードナビゲーションとフォーカス管理
• 色のコントラスト要件
• アクセシビリティ検証ツール

API リファレンス

📄 参照： references/skeleton-api.md

• 説明とデフォルト値を含むすべてのプロパティ
• メソッドとライフサイクル管理
• イベント処理のパターン
• 型定義（SkeletonType、ShimmerEffect）
• プロパティの使用例
• API の完全なドキュメント

---

クイックスタート

import { Component } from '@angular/core';
import { SkeletonModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [SkeletonModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div>
      <h2>Loading User Profile...</h2>
      
      <ejs-skeleton shape="Circle" width="60px"></ejs-skeleton>
      
      
      <ejs-skeleton width="30%" height="15px"></ejs-skeleton>
      <ejs-skeleton width="50%" height="15px"></ejs-skeleton>
      
      
      <ejs-skeleton shape="Rectangle" width="100%" height="150px"></ejs-skeleton>
    </div>
  `
})
export class AppComponent {}

---

よく使われるパターン

パターン 1：カードの読み込みスケルトン

データの読み込み中に、カードコンポーネントに一致するスケルトンレイアウトを表示します。

@Component({
  selector: 'app-card-skeleton',
  template: `
    <div class='card-skeleton'>
      
      <div class='avatar-section'>
        <ejs-skeleton shape="Circle" width="50px"></ejs-skeleton>
      </div>
      
      <div class='content-section'>
        <ejs-skeleton width="60%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="40%" height="12px"></ejs-skeleton>
        <ejs-skeleton width="100%" height="80px"></ejs-skeleton>
      </div>
      
      <div class='action-section'>
        <ejs-skeleton shape="Rectangle" width="30%" height="36px"></ejs-skeleton>
      </div>
    </div>
  `
})
export class CardSkeletonComponent {}

パターン 2：パルス効果を使ったリストの読み込み

パルス状のシマー効果を使って、複数のスケルトン行を表示します。

@Component({
  selector: 'app-list-skeleton',
  template: `
    <div class='list-skeleton'>
      <div class='list-item' *ngFor="let item of [1,2,3,4,5]">
        <ejs-skeleton shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
        <div class='item-content'>
          <ejs-skeleton width="50%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
          <ejs-skeleton width="30%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
        </div>
      </div>
    </div>
  `
})
export class ListSkeletonComponent {}

パターン 3：条件付きスケルトンのレンダリング

読み込み中はスケルトンを表示し、コンテンツの準備ができたら非表示にします。

@Component({
  selector: 'app-conditional-skeleton',
  template: `
    
    <div *ngIf="isLoading">
      <ejs-skeleton shape="Rectangle" width="100%" height="200px" 
                    shimmerEffect="Wave"></ejs-skeleton>
    </div>
    
    <div *ngIf="!isLoading">
      <img [src]="imageUrl" alt="Loaded content">
    </div>
  `
})
export class ConditionalSkeletonComponent {
  isLoading = true;
  imageUrl = '';
  
  ngOnInit() {
    // Simulate loading
    setTimeout(() => {
      this.isLoading = false;
      this.imageUrl = 'assets/image.jpg';
    }, 2000);
  }
}

---

主なプロパティ

プロパティ	型	デフォルト	用途
shape	SkeletonType	'Text'	スケルトンの形状を定義します：Text、Circle、Square、Rectangle
shimmerEffect	ShimmerEffect	'Wave'	アニメーション効果：Wave、Pulse、Fade
width	string | number	''	スケルトンの幅（Circle/Square では必須）
height	string | number	''	スケルトンの高さ
visible	boolean	true	スケルトンの表示を制御します
cssClass	string	''	スタイル設定用のカスタム CSS クラス
label	string	'Loading…'	アクセシビリティ用の Aria-label
enableRtl	boolean	false	右から左へのレイアウトを有効にします
enablePersistence	boolean	false	ページの再読み込み後も状態を保持します

一般的な使用例

1. データグリッドの読み込み：サーバーからグリッドデータを読み込んでいる間、スケルトン行を表示します
2. 画像ギャラリー：画像のダウンロード中にプレースホルダーの四角形を表示します
3. フィード／タイムライン：フィード項目の読み込み中に複数のスケルトンカードを表示します
4. プロフィールページ：複数の形状を組み合わせてプロフィールのレイアウトをプレビューします
5. アバター付きリスト：ユーザーリストに Circle + Text の形状を使用します
6. モーダルコンテンツ：非同期処理中にダイアログ内へスケルトンを表示します
7. 商品カード：商品カードのレイアウトに合わせたスケルトンを作成します
8. ダッシュボード：ダッシュボードウィジェット用のスケルトンレイアウトを作成します

トースト

Syncfusion Angular Toast（ejs-toast）は、画面上の指定した位置に短いメッセージを表示する、ノンブロッキングの通知コンポーネントです。トーストは設定可能なタイムアウト後に自動的に閉じ、テンプレート、アクションボタン、アイコン、プログレスバーを使ったリッチコンテンツに対応しています。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• 前提条件と依存関係
• @syncfusion/ej2-angular-notifications のインストール
• CSS／テーマのインポートの追加
• 基本的なトーストの設定（standalone + NgModule）
• コンポーネント作成時にトーストを表示する
• アプリケーションの実行

設定

📄 参照： references/configuration.md

• タイトルとコンテンツのプロパティ
• カスタムターゲットコンテナー
• 閉じるボタンの表示／非表示（showCloseButton）
• プログレスバー（showProgressBar、progressDirection）
• 新しいトーストを上部に表示（newestOnTop）
• 幅と高さのカスタマイズ
• icon プロパティを使ったアイコン
• セマンティックタイプ（e-success、e-info、e-warning、e-danger）用の cssClass
• enableHtmlSanitizer、enableRtl、locale

位置とアニメーション

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

• 定義済みの X／Y 位置（Left、Center、Right／Top、Bottom）
• ピクセル／パーセンテージによるカスタム位置
• 異なる位置への複数のトースト表示
• アニメーション設定（show／hide の効果、duration、easing）
• デフォルトのアニメーション（FadeIn/FadeOut）

テンプレートとアクションボタン

📄 参照： references/template-and-buttons.md

• HTML 文字列および要素 ID のテンプレート
• #template、#title、#content を使った Angular の ng-template
• show() メソッドの引数による動的テンプレート
• buttons プロパティとクリックハンドラーを使ったアクションボタン
• ButtonModelPropsModel の設定

タイムアウトとイベント

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

• timeOut プロパティ（デフォルト：5000ms）
• ホバー時の extendedTimeout（デフォルト：1000ms）
• 静的トースト（timeOut: 0）
• すべてのイベント：created、open、close、click、beforeOpen、beforeClose、beforeSanitizeHtml、destroyed
• イベント引数の型とキャンセルのパターン

トーストユーティリティサービス

📄 参照： references/toast-utility.md

• 最小限のコードでトーストを表示する ToastUtility.show()
• 定義済みのタイプ：Information、Success、Error、Warning
• イベントと位置指定を含む ToastModel 引数の完全な使用方法
• ユーティリティとコンポーネントのどちらを使うか

ハウツーガイド

📄 読む： references/how-to.md

• クリック／タップでトーストを閉じる
• トーストの重複を防ぐ
• 表示するトーストの最大数を制限する
• 動的テンプレートを追加する
• トースト内に Angular の ng-template を表示する
• さまざまな位置に複数のトーストを表示する
• プログレスバーのテーマとサイズをカスタマイズする
• トーストが開く前に音声を再生する
• モバイルのスワイプでトーストが閉じないようにする
• さまざまな種類のトーストを表示する

API リファレンス

📄 読む： references/api.md

• すべてのプロパティと型、デフォルト値
• メソッド：show()、hide()、destroy()
• 引数の型へのリンクを含むすべてのイベント
• ToastAnimationSettingsModel、ToastPositionModel、ButtonModelPropsModel

---

クイックスタート

// app.ts (Angular standalone)
import { Component, ViewChild } from '@angular/core';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';

@Component({
  imports: [ToastModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-toast #toast (created)="onCreated()">
      <ng-template #title><div>Notification</div></ng-template>
      <ng-template #content><div>Your action was successful.</div></ng-template>
    </ejs-toast>
    <button (click)="toast.show()">Show Toast</button>
  `
})
export class App {
  @ViewChild('toast') toast: any;
  onCreated() { this.toast.show(); }
}

インストール：

ng add @syncfusion/ej2-angular-notifications

CSS（styles.css）：

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

---

よく使われるパターン

成功／エラー／警告／情報トースト

// Using cssClass for semantic coloring
toastObj.show({ content: 'File saved!', cssClass: 'e-toast-success' });
toastObj.show({ content: 'Upload failed.', cssClass: 'e-toast-danger' });
toastObj.show({ content: 'Low disk space.', cssClass: 'e-toast-warning' });
toastObj.show({ content: 'Update available.', cssClass: 'e-toast-info' });

ToastUtility によるクイックトースト

import { ToastUtility } from '@syncfusion/ej2-angular-notifications';
ToastUtility.show('Operation successful', 'Success', 3000);

プログレスバーと閉じるボタン付きのトースト

<ejs-toast [showProgressBar]="true" [showCloseButton]="true" [timeOut]="4000">
</ejs-toast>

下部中央に配置したトースト

public position = { X: 'Center', Y: 'Bottom' };

<ejs-toast [position]="position"></ejs-toast>

アクションボタン

public buttons = [
  { model: { content: 'Undo' }, click: () => this.onUndo() },
  { model: { content: 'Dismiss' } }
];

静的トースト（自動で閉じない）

<ejs-toast [timeOut]="0" [showCloseButton]="true"></ejs-toast>

---

主なプロパティ

プロパティ	型	デフォルト	目的
title	any	null	トーストの見出しテキストまたは HTML
content	any	null	トーストの本文テキストまたは HTML
timeOut	number	5000	指定したミリ秒後に自動で閉じます（0 = 静的）
position	ToastPositionModel	{X:'Left',Y:'Top'}	画面上の位置
showCloseButton	boolean	false	閉じるための × ボタンを表示します
showProgressBar	boolean	false	カウントダウンするプログレスバーを表示します
progressDirection	string	'Rtl'	プログレスバーの方向（Ltr/Rtl）
newestOnTop	boolean	true	新しいトーストを古いトーストの前に挿入します
cssClass	string	null	カスタム CSS クラス
icon	string	null	左上のアイコンに使用する CSS クラス
target	string/Element	null	コンテナー要素（デフォルト：body）
width	string/number	'300'	トーストの幅
height	string/number	'auto'	トーストの高さ
buttons	ButtonModelPropsModel[]	[{}]	アクションボタン
animation	ToastAnimationSettingsModel	FadeIn/FadeOut	表示／非表示時のアニメーション
extendedTimeout	number	1000	ホバー時に追加される時間
enableRtl	boolean	false	右から左への表示

---

よくあるユースケース

シナリオ	方法
1 行で済むシンプルな通知	ToastUtility.show() を使用します
型付き通知（成功／エラー）	cssClass: 'e-toast-success' または ToastUtility.show(..., 'Success', ...)
ユーザー操作が必要な通知	クリックハンドラーを含む buttons 配列を追加します
閉じるまで表示し続けるアラート	timeOut: 0 と showCloseButton: true を設定します
複数のトーストを同時に表示	target コンテナーを変えて、個別の ejs-toast インスタンスを使用します
カスタムコンテナー内の通知	target プロパティに要素の参照またはセレクターを設定します
メッセージの重複を防ぐ	同じタイトルがすでに表示されている場合、beforeOpen イベントでキャンセルします
モバイル向け（スワイプで閉じない）	args.type === 'swipe' の場合、beforeClose をキャンセルします
進行状況インジケーター	showProgressBar: true を設定し、beforeOpen イベントでカスタマイズします

バッジ

Syncfusion Angular Badge は純粋な CSS コンポーネントであり、インポートする Angular コンポーネントクラスはありません。対象の UI 要素内にネストした <span>（または <a>）要素に、CSS 修飾クラスを追加してバッジを適用します。

パッケージ： @syncfusion/ej2-angular-notifications

主な機能

• 8 種類のカラー — primary、secondary、success、danger、warning、info、light、dark
• 形状 — 円形、ピル、リンク、通知、ドット、重ね合わせ
• 配置 — 親要素の上部（デフォルト）と下部に配置
• カスタマイズ — CSS で色、サイズ、任意の位置をカスタマイズ
• ListView との統合 — 動的なコンテンツを含むバッジをリスト項目に埋め込み

ナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• パッケージのインストールと CSS のインポート
• Angular コンポーネントへの最初のバッジの追加
• 最小限の動作するサンプル
• アプリケーションの実行

バッジの種類と形状

📄 読む： references/types-and-shapes.md

• あらかじめ用意された 8 種類のカラーと、それぞれの意味
• 円形、ピル型、リンク型、通知型、ドット型、重ね合わせ型の形状
• バッジの配置（上部または下部）
• 修飾クラスを組み合わせる場合（例：重ね合わせ＋通知＋円形）

カスタマイズ

📄 読む： references/customization.md

• CSS クラスを使った色の上書き
• font-size によるバッジサイズの調整
• CSS の上書きによる配置のカスタマイズ（左上、左下）
• カスタム CSS と組み込みの修飾クラスを使い分ける場合

ハウツーガイド

📄 読む： references/how-to.md

• バッジを ListView コンポーネントに統合する
• バッジの内容を動的に更新する（カウントを増やす）
• DOM の更新を使った、バッジの状態を管理する Angular のパターン

クイックスタート

1. パッケージをインストールします：

npm install @syncfusion/ej2-angular-notifications --save

2. src/styles.css に CSS を追加します：

@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";

3. コンポーネントにバッジを追加します：

<h1>Badge Component <span class="e-badge e-badge-primary">New</span></h1>

よく使われるパターン

アイコン上の通知バッジ

<div class="badge-block">
  <div class="skype svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div>

ドット型のステータスインジケーター（下部配置）

<div class="badge-block">
  <div class="firefox svg_icons"></div>
  <span class="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div>

ピル型のラベル

<h1>Messages <span class="e-badge e-badge-primary e-badge-pill">New</span></h1>

CSS クラスリファレンス

クラス	用途
e-badge	すべてのバッジに必要な基本クラス
e-badge-primary / e-badge-{color}	カラーバリエーション
e-badge-pill	ピル型（角丸の長方形）の形状
e-badge-circle	円形
e-badge-notification	通知カウンターのバッジ
e-badge-dot	最小限のドット型バッジ（テキストなし）
e-badge-overlap	親要素の端に重ねて配置
e-badge-bottom	バッジを上部ではなく下部に配置