syncfusion-angular-inputs

Syncfusion Angular Inputs の実装

Uploader

Syncfusion Angular Uploader（ejs-uploader）は、非同期アップロード、大容量ファイルのチャンクアップロード、ドラッグ＆ドロップ、クリップボードからの貼り付け、ディレクトリのアップロード、ファイル検証、テンプレート、フォーム連携、JWT 認証、包括的なイベント処理に対応した、機能豊富なファイルアップロードコンポーネントです。

コンポーネントの概要

Syncfusion Angular Uploader は、次の機能を提供します。

• 非同期アップロードモード： 自動アップロード（デフォルト）、またはアクションボタンを使った手動アップロード
• チャンクアップロード： 大容量ファイルを設定可能なバイトサイズのチャンクに分割し、再試行ロジックを適用
• 順次アップロード： サーバーへのトラフィックを減らすため、ファイルを一度に 1 つずつ処理
• ファイルのソース： ファイル選択ダイアログ、ドラッグ＆ドロップ、クリップボードからの貼り付け、ディレクトリ選択
• 検証： ファイル形式（拡張子）、最小／最大サイズ、カスタム件数の上限、重複防止
• テンプレート： ファイルリスト項目の構造をカスタマイズし、完全にカスタムのアップロード UI を構築
• フォームのサポート： HTML フォームの送信、テンプレート駆動型フォーム（ngModel）、リアクティブフォーム（FormGroup）
• アクセシビリティ： WCAG 2.2、Section 508、キーボードナビゲーション、スクリーンリーダーのサポート
• ローカライズ： L10n を使ってすべての静的テキストをカスタマイズ

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

⚠️ エージェント向けの注意： このガイドは複数のリファレンスドキュメントへのリンクを含みます。AI エージェントは、作業に関連するセクションのみを読み取ってください。すべてのリファレンスを自動的にたどらないでください。最小権限の原則に従い、必要なものだけを取得してください。

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-angular-inputs のインストール ⚠️ 本番パイプラインで npm install を実行する前に、必ずパッケージのバージョンと整合性を確認してください（サプライチェーンの衛生管理）。
• パッケージの設定、CSS のインポート、Angular スタンドアロンコンポーネントの使用方法
• <ejs-uploader> コンポーネントの追加
• 非同期設定（saveUrl、removeUrl）の構成
• 成功イベントと失敗イベントの処理
• カスタムのドロップ領域の追加

非同期アップロード

📄 参照： references/async-upload.md

• 複数ファイルおよび単一ファイルのアップロードモード（multiple プロパティ）
• 保存アクションの設定とサーバー側の処理
• 削除アクションと postRawFile の使用
• 自動アップロードと手動アップロード（autoUpload プロパティ）
• 順次アップロード（sequentialUpload）
• 事前読み込みファイル（files プロパティ）
• アップロードリクエストへのカスタム HTTP ヘッダーの追加

チャンクアップロード

📄 参照： references/chunk-upload.md

• asyncSettings.chunkSize を使ったチャンクアップロードの有効化
• チャンクアップロードの一時停止、再開、キャンセル
• 再試行の設定（retryCount、retryAfterDelay）
• chunkSuccess イベントと chunkFailure イベント
• サーバー側でのチャンク結合の実装

ファイル検証

📄 参照： references/validation.md

• allowedExtensions を使ったファイル形式の制限
• ファイルサイズの最小／最大制約（minFileSize、maxFileSize）
• selected イベントによるアップロード件数の制限
• ファイルの重複アップロードの防止
• アップロード前の MIME タイプ検証
• ドラッグ＆ドロップ時の Image/* 検証

ファイルのソース

📄 参照： references/file-sources.md

• クリップボードからの画像の貼り付け
• directoryUpload を使ったディレクトリ（フォルダー）のアップロード
• 組み込みおよびカスタムのドロップ領域を使ったドラッグ＆ドロップ
• カスタムドロップ領域のスタイル設定（.e-upload-drag-hover）
• 外部ボタンからのファイル選択の開始

テンプレートとカスタム UI

📄 参照： references/templates-and-custom-ui.md

• template プロパティを使ったファイルリストテンプレート
• 完全にカスタムのアップロード UI の構築（showFileList でデフォルトのリストを非表示）
• HTML 要素を使ったアクションボタンのカスタマイズ（buttons プロパティ）
• プログレスバーの外観のカスタマイズ
• アップロード前の画像プレビュー
• サーバーへのアップロード前の画像のサイズ変更

フォームとの連携

📄 参照： references/form-integration.md

• HTML フォーム内での Uploader の使用（同期送信）
• ngModel を使用したテンプレート駆動フォーム
• FormGroup を使用したリアクティブフォーム
• 必須フィールドの検証（required 属性）
• フォームのリセット時の動作

スタイルと外観

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

• アップローダーのラッパーのサイズをカスタマイズする
• 参照ボタンのスタイルを設定する
• ドロップ領域のテキストをカスタマイズする
• ファイルリストコンテナーをカスタマイズする
• デフォルトのドロップ領域を非表示にする
• 主要な Uploader 要素の CSS クラスリファレンス

アクセシビリティとローカライズ

📄 参照： references/accessibility-and-localization.md

• WCAG 2.2、Section 508、キーボードショートカット
• スクリーンリーダーと RTL のサポート
• L10n を使用したすべての静的ラベルとメッセージのローカライズ

高度な実装パターン

📄 参照： references/advanced-patterns.md

• upload() メソッドを使用してプログラムからファイルをアップロードする
• 非表示（バックグラウンド）アップロード
• customFormData を使用して追加のフォームデータを追加する
• アップロード／削除リクエストの JWT 認証
• ファイルを削除する前に確認ダイアログを表示する
• 選択したファイルの合計サイズを取得する
• ファイルリストで選択したファイルを並べ替える
• サーバーからアップロード済みのファイルを開いて編集する
• アップロードした画像をバイナリ形式に変換する

API リファレンス

📄 参照： references/api.md

• プロパティ、メソッド、イベントの完全なリファレンス
• AsyncSettingsModel、ButtonsPropsModel、FilesPropModel
• すべてのイベント引数の型とフィールド

クイックスタートの例

非同期アップロードを使用する最小構成のファイルアップローダー（Angular 21 以降のスタンドアロン）：

import { Component } from '@angular/core';
import { UploaderModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [UploaderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-uploader
      [asyncSettings]="asyncSettings"
      [autoUpload]="false"
      (success)="onSuccess($event)"
      (failure)="onFailure($event)">
    </ejs-uploader>
  `
})
export class AppComponent {
  public asyncSettings = {
    saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
    removeUrl: 'https://your-api/upload/remove' // Replace with your actual endpoint
  };

  onSuccess(args: any): void {
    console.log('Upload operation:', args.operation, 'File:', args.file.name);
  }

  onFailure(args: any): void {
    console.error('Upload failed:', args.file.name);
  }
}

CSS テーマの設定（styles.css）：

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

よく使われるパターン

パターン 1：ドラッグ＆ドロップによる自動アップロード

// Automatically uploads dropped or browsed files
<ejs-uploader
  [asyncSettings]="asyncSettings"
  [dropArea]="dropElement"
  [multiple]="true"
  (success)="onSuccess($event)">
</ejs-uploader>

パターン 2：大容量ファイルのチャンクアップロード

<ejs-uploader
  [asyncSettings]="chunkSettings"
  (chunkSuccess)="onChunkSuccess($event)"
  (chunkFailure)="onChunkFailure($event)">
</ejs-uploader>

// In component:
chunkSettings = {
  saveUrl: 'https://your-api/upload/save',    // Replace with your actual endpoint
  removeUrl: 'https://your-api/upload/remove', // Replace with your actual endpoint
  chunkSize: 500000  // 500 KB chunks
};

パターン 3：検証付きアップロード（種類＋サイズ）

<ejs-uploader
  [asyncSettings]="asyncSettings"
  allowedExtensions=".jpg,.png,.pdf"
  [minFileSize]="1024"
  [maxFileSize]="5000000">
</ejs-uploader>

パターン 4：事前読み込み済みファイル

<ejs-uploader
  [asyncSettings]="asyncSettings"
  [files]="preloadedFiles">
</ejs-uploader>

// In component:
preloadedFiles = [
  { name: 'report', size: 200000, type: '.pdf' },
  { name: 'photo', size: 500000, type: '.jpg' }
];

パターン 5：JWT 認証付きアップロード

<ejs-uploader
  [asyncSettings]="asyncSettings"
  (uploading)="addAuthHeader($event)"
  (removing)="addAuthHeader($event)">
</ejs-uploader>

// ⚠️ Never hardcode tokens — always retrieve from a secure auth service (e.g., Angular AuthService or OAuth library).
// ⚠️ Always transmit tokens over HTTPS only. Never pass tokens as URL query parameters.
addAuthHeader(args: any): void {
  args.currentRequest.setRequestHeader('Authorization', `Bearer ${this.token}`);
}

主なプロパティ

プロパティ	型	デフォルト	目的
[asyncSettings]	AsyncSettingsModel	{saveUrl:'',removeUrl:''}	サーバーの保存／削除 URL とチャンク設定
[autoUpload]	boolean	true	ファイル選択後すぐにアップロードする
[multiple]	boolean	true	複数ファイルの選択を許可する
[allowedExtensions]	string	''	許可する拡張子をカンマ区切りで指定する（例：.jpg,.png）
[minFileSize]	number	0	最小ファイルサイズ（バイト単位）
[maxFileSize]	number	30000000	最大ファイルサイズ（バイト単位、約 28.6 MB）
[files]	FilesPropModel[]	[]	サーバーから事前読み込みするファイル
[dropArea]	string | HTMLElement	null	カスタムのドロップ先要素またはセレクター
[directoryUpload]	boolean	false	フォルダー／ディレクトリーのアップロードを有効にする
[sequentialUpload]	boolean	false	ファイルを 1 つずつアップロードする
[showFileList]	boolean	true	デフォルトのファイルリストを表示／非表示にする
[template]	any	null	ファイルリスト項目用のカスタムテンプレート
[buttons]	ButtonsPropsModel	{browse,clear,upload}	ボタンのテキスト／HTML をカスタマイズする
[enabled]	boolean	true	コンポーネントを有効または無効にする
[cssClass]	string	''	ルート要素に追加する CSS クラス
[enableRtl]	boolean	false	右から左へのレンダリング
[enableHtmlSanitizer]	boolean	true	ファイル名による XSS を防止する
[dropEffect]	DropEffect	'Default'	ドラッグ効果：Copy、Move、Link、None

主要なイベント

イベント	発生するタイミング	主な引数
(selected)	ファイルが選択またはドロップされたとき	filesData, cancel, modifiedFilesData
(uploading)	各ファイルのアップロード開始前	fileData, currentRequest, customFormData, cancel
(success)	アップロードまたは削除が成功したとき	file, operation（upload|remove）, event
(failure)	アップロードまたは削除が失敗したとき	file, operation, event
(progress)	アップロードの進行中	file, event（loaded, total）
(removing)	ファイル削除リクエストの前	filesData, postRawFile, currentRequest
(beforeRemove)	削除確認の前	filesData, cancel
(beforeUpload)	アップロード処理の前	fileData, customFormData
(change)	ファイルリストが変更されたとき	file
(clearing)	すべてクリアする操作の前	cancel
(chunkSuccess)	各チャンクのアップロードが成功したとき	chunkIndex, totalChunk, chunkSize, file
(chunkFailure)	各チャンクのアップロードが失敗したとき	chunkIndex, totalChunk, chunkSize, file, cancel
(chunkUploading)	各チャンクのアップロード前	fileData, currentRequest, customFormData
(pausing)	チャンクのアップロードが一時停止されたとき	file, chunkIndex
(resuming)	チャンクのアップロードが再開されたとき	file, chunkIndex
(canceling)	アップロードがキャンセルされたとき	file
(fileListRendering)	各ファイル項目の描画前	element, fileInfo
(actionComplete)	すべてのファイルの処理完了時	fileData
(created)	コンポーネントの初期化時	—

主なメソッド

メソッド	用途
upload(files?, custom?)	選択したファイルまたは指定したファイルのアップロードをプログラムから開始します
remove(fileData?, custom?, postRawFile?)	リストまたはサーバーからファイルを削除します
cancel(fileData?)	進行中のチャンクアップロードをキャンセルします
pause(fileData?, custom?)	チャンクアップロードを一時停止します
resume(fileData?, custom?)	一時停止中のチャンクアップロードを再開します
retry(fileData?, fromCanceledStage?, custom?)	失敗またはキャンセルされたアップロードを再試行します
clearAll()	リストからすべてのファイルをクリアします
getFilesData(index?)	リストに表示されているファイルデータの配列を取得します
createFileList(fileData)	プログラムからファイルリスト項目を作成します
sortFileList(filesData?)	ファイルリストをアルファベット順に並べ替えます
bytesToSize(bytes)	バイト数を読みやすい KB／MB 形式の文字列に変換します
destroy()	コンポーネントを破棄し、イベントを切り離します

一般的なユースケース

ユースケース 1：プロフィール写真のアップロード

• multiple="false"、allowedExtensions=".jpg,.png,.gif,.webp"、maxFileSize=5000000
• アップロード前のプレビューには selected イベントを使用します
• 進行状況インジケーター付きの自動アップロード

ユースケース 2：ドキュメントアップロードポータル

• 複数ファイル、allowedExtensions=".pdf,.doc,.docx,.xlsx"
• 大容量ファイルには一時停止／再開に対応したチャンクアップロードを使用します
• サーバー負荷を管理するため、順次アップロードします

ユースケース 3：画像ギャラリーの一括アップロード

• 複数ファイル、ディレクトリアップロードを有効化します
• selected イベントと FileReader を使用してサムネイルをプレビューします
• アップロード前にファイル名で並べ替えます

ユースケース 4：セキュアなファイルアップロード（API 認証）

• uploading イベントのヘッダーを通じて JWT トークンを挿入します
• カスタムの customFormData でメタデータを渡します
• 保存前にサーバーでトークンを検証します

ユースケース 5：必須ファイルを含むフォーム

• autoUpload=false、フォームを同期的に送信します
• data-required-message を使用して必須属性を検証します
• テンプレート駆動またはリアクティブフォームのバインディングを使用します

次のステップ

1. はじめに → パッケージをインストールして、基本的なアップローダーを表示します
2. 非同期アップロード → 保存／削除 URL とアップロードモードを設定します
3. 検証 → 拡張子とサイズの制約を追加します
4. チャンクアップロード → 一時停止／再開機能を使って大きなファイルを処理します
5. テンプレート → ファイルリストの外観をカスタマイズします
6. フォーム連携 → Angular フォームにバインドします
7. 高度なパターン → JWT 認証、プログラムによるアップロード、カスタム UI
8. API リファレンス → プロパティ、メソッド、イベントの一覧

---

詳しい実装については、references/getting-started.md から始めてください

NumericTextBox

コンポーネントの概要

Syncfusion Angular NumericTextBox は、数値用の専用入力コントロールです。以下の機能を備えています。

• 数値検証（最小値／最大値の範囲と厳密モード）
• 書式設定（通貨、パーセント、小数）
• スピンボタン（値の調整）
• 装飾要素（アイコンやラベル用の前置／後置テンプレート）
• アクセシビリティ（WCAG 2.2、ARIA、キーボードナビゲーション）
• ローカライズ（複数のカルチャと RTL のサポート）
• フォーム連携（リアクティブフォーム、テンプレート駆動フォーム）

---

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

はじめに

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

• インストールとパッケージのセットアップ
• Angular 21+ のスタンドアロンコンポーネントのセットアップ
• NumericTextBox の基本的な実装
• CSS のインポートとテーマの設定
• 最小値／最大値を使った範囲検証
• シンプルな書式設定の例
• 精度と小数の制御
• 双方向バインディングの設定
• リアクティブフォームとの連携

書式と数値のスタイル設定

📄 参照先： references/formats-styling.md

• 標準書式（通貨 c2、パーセント p、数値 n）
• カスタム数値書式文字列
• 小数桁数の制御
• 通貨記号とローカライズ
• NumericTextBox のラッパーとアイコンのスタイル設定
• CSS のカスタマイズパターン

スピナーとステップ制御

📄 参照先： references/spinners-and-step.md

• スピンボタンの表示設定（showSpinButton）
• ステップ値の設定（step プロパティ）
• スピンの上向き／下向き矢印アイコンのカスタマイズ
• 矢印キーによる操作
• スピンボタンの無効化

装飾要素とテンプレート

📄 参照先： references/adornments-and-templates.md

• prependTemplate と appendTemplate を使った接頭辞／接尾辞の追加
• 通貨記号と単位ラベル
• アクションボタンとアイコン
• 検証に影響を与えないステータスインジケーター
• テンプレートの使用パターン

検証とフォーム連携

📄 参照先： references/validation-and-forms.md

• 範囲検証（strictMode を使った最小値／最大値）
• カスタム検証ルール
• エラー状態と警告状態
• リアクティブフォームのパターン

高度なパターンと特殊なケース

📄 参照先： references/advanced-patterns.md

• フォーカス時に末尾のゼロを維持する
• null 入力を防ぐ（常に値を必須にする）
• null 入力の設定
• クリアボタンの動作
• 読み取り専用状態と無効状態
• フォーカスイベントとブラーイベントの処理
• フロートラベルの種類（常時、オート、なし）
• パフォーマンスの最適化

アクセシビリティと移行

📄 参照先： references/accessibility-and-migration.md

• WCAG 2.2 レベル AA への準拠
• ARIA 属性（spinbutton ロール、aria-valuemin、aria-valuemax など）
• キーボードナビゲーション（上／下矢印）
• スクリーンリーダーのサポート
• 右から左に記述する言語向けの RTL サポート
• EJ1 から EJ2 への API 移行ガイド
• ローカライズとグローバル化

グローバル化とローカライズ

📄 参照先： references/globalization.md

• Locale プロパティの設定
• カルチャ固有の数値書式
• RTL（右から左）のサポート
• 国際的な数値書式

API リファレンス

📄 参照: references/api.md

• 型、デフォルト値、説明を含むすべてのコンポーネントプロパティ
• シグネチャと使用例を含むすべての公開メソッド
• 引数インターフェイスの詳細を含むすべてのイベント
• ChangeEventArgs、NumericBlurEventArgs、NumericFocusEventArgs インターフェイス
• すぐに参照できる完全な概要テーブル

---

クイックスタートの例

import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [NumericTextBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-numerictextbox
      value="100"
      min="10"
      max="1000"
      step="5"
      format="c2"
      placeholder="Enter amount">
    </ejs-numerictextbox>
  `
})
export class AppComponent {}

---

よく使われるパターン

検証付き通貨入力

<ejs-numerictextbox
  value="50.00"
  format="c2"
  currency="USD"
  min="0"
  max="10000"
  decimals="2"
  strictMode="true">
</ejs-numerictextbox>

パーセント入力

<ejs-numerictextbox
  value="25"
  format="p"
  min="0"
  max="100"
  step="1">
</ejs-numerictextbox>

装飾要素付き（単位ラベル）

<ejs-numerictextbox
  value="100"
  [appendTemplate]="appendUnit">
</ejs-numerictextbox>

<ng-template #appendUnit>
  <span class="unit-label">kg</span>
</ng-template>

フォームコントロールとの双方向バインディング

<ejs-numerictextbox
  [(ngModel)]="quantity"
  min="1"
  max="100"
  step="1">
</ejs-numerictextbox>

---

主なプロパティ

プロパティ	型	目的	デフォルト
value	number	現在の数値	null
min	number	設定可能な最小値	Number.MIN_VALUE
max	number	設定可能な最大値	Number.MAX_VALUE
step	number	増減する量	1
decimals	number	設定可能な小数点以下の桁数	null
format	string	数値形式（例：'c2'、'n2'、'p'）	null
currency	string	通貨コード（例：'USD'、'EUR'）	null
strictMode	boolean	最小値／最大値の検証を適用	false
showSpinButton	boolean	上下のスピナーボタンを表示	true
showClearButton	boolean	クリアボタンを表示	false
readonly	boolean	編集を禁止	false
disabled	boolean	コンポーネントを無効化	false
locale	string	カルチャーコード（例：'de-DE'、'fr-FR'）	'en-US'
enableRtl	boolean	右から左への表示モードを有効化	false
placeholder	string	ヒントテキスト	null
floatLabelType	string	ラベルのフロート動作（'Auto'、'Always'、'Never'）	'Never'

---

よくある使用例

1. Eコマースの数量入力 — 最小値／最大値の検証付き商品数量セレクター
2. 金融フォーム — 通貨記号と小数点以下の桁数を指定した通貨入力
3. 科学技術アプリケーション — 高精度の小数入力
4. アンケート／フォームデータ — 0～100の範囲を指定したパーセント入力
5. 多言語サポート — ユーザーのロケールに応じた数値の書式設定
6. アクセシビリティ優先のフォーム — WCAG準拠の数値入力
7. モバイル対応 — タッチしやすいスピナーボタンとキーボード入力

---

関連項目

• Syncfusion Angular 入力コントロール
• Angular フォームのドキュメント
• WCAG 2.2 アクセシビリティガイドライン
• Syncfusion Theme Studio

TextBox

Syncfusion Angular TextBox コンポーネントは、フローティングラベル、検証状態、装飾要素（前置／後置する要素）、アクセシビリティサポート、包括的なスタイル設定オプションによって、標準の HTML 入力要素を強化する、機能豊富な入力コンポーネントです。このスキルでは、実装パターン、設定、ベストプラクティスについて説明します。

コンポーネントの概要

TextBox コンポーネントが提供する機能：

機能	目的
フローティングラベル	フォーカス時または入力済みのときに、入力欄の上に浮かぶアニメーション付きラベル
検証状態	CSS クラスによる視覚的なフィードバック（エラー、警告、成功）
装飾要素	カスタム HTML 要素（アイコン、ボタン、単位）の前置／後置
クリアボタン	入力値をリセットする組み込みのクリア機能
無効／読み取り専用状態	ユーザーの操作と編集可否を制御
HTML 属性	標準の入力属性（type、maxlength など）をサポート
複数行サポート	行数／列数を指定した Textarea の設定
アクセシビリティ	WCAG 2.2 準拠、キーボード操作、ARIA 属性
RTL サポート	右から左に記述する言語をサポート
スタイル設定オプション	CSS クラス、検証色、レスポンシブなサイズ設定

---

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

はじめに

📄 参照: references/getting-started.md

• インストールとパッケージのセットアップ
• 最初の TextBox コンポーネントの作成
• CSS のインポートとテーマの選択
• フローティングラベルの実装
• 基本的なイベントバインディングとデータバインディング
• よくあるセットアップの問題と解決方法

入力機能と状態管理

📄 参照: references/input-features.md

• クリアボタンの実装（showClearButton）
• 無効状態（enabled プロパティ）
• 読み取り専用状態（readonly プロパティ）
• HTML 属性の設定（htmlAttributes）
• 入力タイプと属性のサポート
• フォームの状態管理パターン

装飾とカスタマイズ

📄 参照: references/adornments-customization.md

• prepend および append テンプレートの使用
• 視覚的な補足のためのアイコン装飾
• ボタン装飾（パスワードの切り替え、クリア）
• 検証状態インジケーター
• 単位インジケーター（通貨、温度など）
• パフォーマンスとアクセシビリティに関する考慮事項

検証状態とエラー処理

📄 参照: references/validation-states.md

• エラー、警告、成功の検証状態
• CSS クラスを使用する方法（e-error、e-warning、e-success）
• 視覚的なフィードバックパターン
• 必須フィールドへのアスタリスクの追加
• 検証機能とのフォーム連携
• カスタムエラーメッセージの表示

スタイルと外観のカスタマイズ

📄 参照: references/styling-appearance.md

• CSS の構造とクラス階層
• 基本的なサイズ設定（高さ、フォント、パディング）
• フローティングラベルの色のカスタマイズ
• 検証状態の色の変更
• 境界線、角丸、高度なスタイル設定
• 入力値に応じた動的なスタイル設定
• テーマとの連携とカスタマイズ

複数行入力とサイズ設定機能

📄 参照: references/multiline-sizing.md

• 複数行テキストエリアの設定
• 行数と列数のサイズ設定
• レスポンシブなサイズ設定パターン
• 高さの調整と制約
• 文字数カウントの実装
• テキストの折り返しとオーバーフローの処理

アクセシビリティと移行

📄 参照: references/accessibility-migration.md

• WCAG 2.2 と Section 508 への準拠
• キーボードナビゲーションのサポート
• ARIA 属性（aria-labelledby、aria-invalid、aria-disabled）
• スクリーンリーダーとの互換性
• CSS TextBox から Angular コンポーネントへの移行
• RTL とモバイルのアクセシビリティ

---

クイックスタートの例

フローティングラベル付き TextBox を作成する：

import { Component } from '@angular/core';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TextBoxModule],
  template: `
    <div style="margin: 50px;">
      <h2>Angular TextBox Example</h2>
      <ejs-textbox 
        #textbox
        [floatLabelType]="'Auto'"
        placeholder="Enter your name"
        (input)="onInput($event)"
      ></ejs-textbox>
      <p>Value: {{ textValue }}</p>
    </div>
  `
})
export class AppComponent {
  textValue = '';

  onInput(event: any) {
    this.textValue = event.target.value;
  }
}

ポイント：

• 自動フローティングラベルには floatLabelType="'Auto'" を使用します
• @syncfusion/ej2-angular-inputs から TextBoxModule をインポートします
• 標準の Angular (input) イベントバインディングを使用します
• フローティングラベルのテキストには placeholder を設定します

---

よく使われるパターン

パターン 1：アイコン装飾付きメール入力

<ejs-textbox
  placeholder="Email"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'appendTemplate'"
></ejs-textbox>
<ng-template #appendTemplate>
  <span class="e-input-group-icon">✉</span>
</ng-template>

使用場面： メール、ユーザー名、または視覚的な補足が必要なその他のフィールド

パターン 2：パスワードの表示切り替え

<ejs-textbox
  [type]="passwordVisible ? 'text' : 'password'"
  placeholder="Password"
  [floatLabelType]="'Auto'"
  [appendTemplate]="'toggleTemplate'"
></ejs-textbox>
<ng-template #toggleTemplate>
  <button (click)="togglePassword()">👁</button>
</ng-template>

// Component
togglePassword() {
  this.passwordVisible = !this.passwordVisible;
}

使用場面： 表示切り替えが必要なパスワードフィールド

パターン 3：エラー表示付き検証

<ejs-textbox
  [cssClass]="isValid ? 'e-success' : 'e-error'"
  placeholder="Phone"
  (change)="validatePhone($event)"
></ejs-textbox>
<p *ngIf="!isValid" style="color: red;">{{ errorMessage }}</p>

使用場面： 検証結果のフィードバックが必要なフォームフィールド

パターン 4：単位インジケーター付き通貨入力

<ejs-textbox
  type="number"
  placeholder="Amount"
  [prependTemplate]="'prependTemplate'"
></ejs-textbox>
<ng-template #prependTemplate>
  <span style="padding: 0 8px;">$</span>
</ng-template>

使用場面： 通貨、温度、または測定値の入力

---

主なプロパティと設定

完全な API の概要については、references/api.mdを参照してください。

プロパティ／メソッド	型	目的
floatLabelType	string	'Auto'
placeholder	string	空のときに表示するテキストです。フローティングラベルにも使用します
value	string	現在の入力値です
enabled	boolean	入力を有効／無効にします（デフォルト：true）
readonly	boolean	入力を読み取り専用にします（選択できますが、編集はできません）
showClearButton	boolean	フィールドに内容があるときにクリアボタンを表示します
cssClass	string	カスタム CSS クラスです（例：'e-error'、'e-warning'、'e-success'、'e-small'、'e-bigger'、'e-outline'、'e-corner'）
htmlAttributes	object	標準 HTML 属性です（name、maxlength、type など）
prependTemplate	template	入力欄の前に追加するコンテンツのテンプレートです
appendTemplate	template	入力欄の後に追加するコンテンツのテンプレートです
multiline	boolean	textarea モードを有効にします（<textarea>をレンダリングします）
addIcon(position, icons)	method	アイコンをプログラムで追加します（position = 'append'
addAttributes(attributes)	method	HTML 属性をプログラムで追加します（例：maxlength）
removeAttributes(names[])	method	以前に追加した属性を削除します
focusIn() / focusOut()	method	コンポーネントにプログラムでフォーカスを設定／解除します
destroy()	method	コンポーネントのインスタンスを破棄し、ハンドラーを切り離します
getPersistData()	method	永続化された状態の文字列を返します（enablePersistenceを使用する場合）

注：

• ボックスモデルの TextBox で角丸を表示するには、CSS クラスe-cornerをe-outlineと組み合わせて使用します。
• rowsとcolsはコンポーネントのプロパティではありません。複数行の TextBox に設定するには、(created)イベントハンドラーでaddAttributes({rows: '5'} as any)を使用してください（references/multiline-sizing.mdを参照）。
• 入力をプログラムで作成する場合（動的フォームなど）は、@syncfusion/ej2-inputsのInput.createInputを使用してください（references/input-features.mdを参照）。

---

主な使用例

1. 連絡先フォーム

フローティングラベル、検証状態、必須項目のインジケーターを備えた複数の TextBox フィールドです。validation-states.mdとaccessibility-migration.mdを参照してください。

2. クリアボタン付き検索入力

すばやく入力をリセットできるshowClearButton=trueを設定した TextBox です。input-features.mdを参照してください。

3. アイコンの接頭辞／接尾辞付き入力

視覚的な補足情報を追加するprependTemplateまたはappendTemplateを設定した TextBox です。adornments-customization.mdを参照してください。

4. 表示切り替え機能付きパスワードフィールド

append テンプレートを使用した表示切り替えボタン付きのパスワード入力です。adornments-customization.mdを参照してください。

5. 複数行コメントフィールド

行数の設定と文字数カウントに対応した Textarea です。multiline-sizing.mdを参照してください。

6. アクセシブルなフォームフィールド

アクセシビリティ基準に準拠するため、適切な ARIA 属性とキーボード操作への対応を備えた TextBox です。accessibility-migration.mdを参照してください。

---

関連ドキュメント

• Syncfusion Angular Inputs: https://ej2.syncfusion.com/angular/documentation/textbox
• TextBox API Reference: https://ej2.syncfusion.com/angular/documentation/api/textbox/
• Angular Input Guide: Angular 公式ドキュメント
• WCAG Accessibility: https://www.w3.org/TR/WCAG22/

---

次のステップ

1. references/textbox-getting-started.mdから始めて、最初のTextBoxを設定します
2. 状態管理については、references/textbox-input-features.mdを確認します
3. カスタムUIには、references/textbox-adornments-customization.mdを使用します
4. フォームの検証については、references/textbox-validation-states.mdを参照します
5. references/textbox-styling-appearance.mdでスタイルをカスタマイズします
6. 高度なケースには、references/textbox-multiline-sizing.mdとreferences/textbox-accessibility-migration.mdを使用します

---

署名

Syncfusion Angular Signature コンポーネント（ejs-signature）は、スムーズなキャンバスベースのデジタル署名キャプチャ体験を提供します。取り消し／やり直し操作、複数のエクスポート形式、カスタマイズ可能なストローク、完全なアクセシビリティ対応など、包括的な機能を備えています。

パッケージ： @syncfusion/ej2-angular-inputs
セレクター： ejs-signature（<canvas>要素上）
モジュール： SignatureModule

コンポーネントの概要

Signature コンポーネントの機能：

• スムーズなストローク描画： 速度に基づいてストローク幅を調整し、自然な署名を実現します
• 完全な操作履歴： スナップショット追跡による取り消し／やり直し
• 複数のエクスポート形式： PNG、JPEG、SVG、Base64、またはBlob
• 高度なカスタマイズ： ストロークのプロパティ、色、背景画像
• アクセシビリティ優先： キーボードショートカットに対応し、WCAG 2.2に準拠
• 読み取り専用状態と無効状態： 表示専用または制限されたシナリオ向け
• 背景の保持： 保存ファイルに背景を含めるか除外するかを選択できます

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

⚠️ エージェント利用時の注意： タスクに関連するセクションのみを読み、すべてのリファレンスを自動的に順番にたどらないでください。

はじめに

📄 読む： references/signature-getting-started.md

• Angular 21のセットアップとスタンドアロンアーキテクチャ
• パッケージのインストールと依存関係
• CSSテーマのインポートと設定
• 基本的なコンポーネントのレンダリング
• 最初に実行するアプリケーション

署名をプログラムで描画する

📄 読む： references/signature-drawing-signatures.md

• テキストベースの署名に使用するdraw()メソッド
• フォントファミリーとフォントサイズのオプション
• カスタムスタイルでテキストを署名として描画
• 描画へのユーザー入力の統合

ユーザー操作

📄 読む： references/signature-user-interactions.md

• canUndo()／canRedo()による確認を伴う取り消し／やり直し機能
• 署名を消去するクリアメソッド
• ユーザー入力を防ぐ無効状態
• 表示専用シナリオ向けの読み取り専用モード
• ボタンの状態管理と変更イベント

カスタマイズとスタイリング

📄 読む： references/signature-customization.md

• ストローク幅の制御（minStrokeWidth、maxStrokeWidth、velocity）
• 16進数／RGB／名前付きカラーによるストローク色のカスタマイズ
• 背景色の設定
• 背景画像の統合
• プロパティのリアルタイム更新

署名を開いて保存する

📄 読む： references/signature-open-save.md

• load()メソッドを使用した、事前に描画された署名の読み込み
• Base64エンコードとURLのサポート
• getSignature()によるBase64形式での保存
• saveAsBlob()によるBlob形式での保存
• 画像ファイルとして保存（save()メソッド）
• 背景を含めるためのsaveWithBackgroundプロパティ

ツールバーとの統合

📄 参照: references/signature-toolbar-integration.md

• 元に戻す／やり直し／保存ボタンを含むツールバーのセットアップ
• ストロークと背景色用のカラーピッカーの統合
• ドロップダウン付きのストローク幅コントロール
• クリアと無効化の切り替え
• 変更イベントによるボタン状態の管理
• 完全に動作するツールバーの例

アクセシビリティ

📄 参照: references/signature-accessibility.md

• WCAG 2.2 および Section 508 への準拠
• キーボードショートカット（Ctrl+Z、Ctrl+Y、Ctrl+S、Delete）
• スクリーンリーダーのサポートとキーボードナビゲーション
• 色のコントラストとフォーカスインジケーター
• モバイルデバイスのサポート

API リファレンス

📄 参照: references/signature-api.md

• プロパティの完全なリファレンス（backgroundColor、strokeColor、disabled など）
• すべてのメソッド（undo、redo、clear、draw、save、load など）
• イベントとイベント引数（change、beforeSave、created）
• パラメーターと戻り値の型

クイックスタートの例

import { Component } from '@angular/core';
import { SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <h4>Sign here</h4>
      <canvas ejs-signature #signature id="signature"></canvas>
    </div>
  `
})
export class AppComponent {}

CSS テーマのセットアップ（styles.css）:

@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.css';

よく使われるパターン

パターン 1: 署名を取得して保存する

import { Component, ViewChild } from '@angular/core';
import { SignatureComponent, SignatureModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  imports: [SignatureModule],
  standalone: true,
  selector: 'app-save-signature',
  template: `
    <canvas ejs-signature #signature id="signature"></canvas>
    <button (click)="saveSignature()">Save as PNG</button>
  `
})
export class SaveSignatureComponent {
  @ViewChild('signature') public signature?: SignatureComponent;

  saveSignature(): void {
    if (!this.signature?.isEmpty()) {
      this.signature?.save('Png', 'MySignature');
    }
  }
}

パターン 2: 状態管理付きで元に戻す／やり直す

change(): void {
  this.undoButton.disabled = !this.signature?.canUndo();
  this.redoButton.disabled = !this.signature?.canRedo();
  this.clearButton.disabled = this.signature?.isEmpty() ?? true;
}

パターン 3: 署名を読み込んで検証する

loadSignature(): void {
  const base64String = (document.getElementById('signatureInput') as any).value;
  try {
    this.signature?.load(base64String);
  } catch (error) {
    console.error('Invalid signature format');
  }
}

主なプロパティ

プロパティ	型	デフォルト	用途
strokeColor	string	'#000000'	ペンのストローク色
backgroundColor	string	'#ffffff'	キャンバスの背景色
backgroundImage	string	''	背景画像の URL ⚠️ 混在コンテンツやオープンリダイレクトの問題を防ぐため、URL を検証して許可リストに登録し、信頼できない値やユーザー提供の値は使用しないでください
minStrokeWidth	number	0.5	最小ストローク幅
maxStrokeWidth	number	2.0	最大ストローク幅
velocity	number	0.7	ストロークの速度係数
saveWithBackground	boolean	false	保存時に背景を含める
disabled	boolean	false	署名入力を無効にする
isReadOnly	boolean	false	読み取り専用（表示のみ）モード
enablePersistence	boolean	false	再読み込み後も署名を保持する
cssClass	string	''	追加の CSS クラス

主なメソッド

メソッド	用途
undo()	最後のストロークを元に戻す
redo()	最後に元に戻したストロークをやり直す
canUndo()	元に戻せる場合は true を返す
canRedo()	やり直せる場合は true を返す
clear()	すべてのストロークを消去する
isEmpty()	ストロークが描画されていない場合は true を返す
draw(text, font?, fontSize?)	署名としてテキストを描画する
save(type?, fileName?)	PNG／JPEG／SVG ファイルとして保存する
getSignature(type?)	Base64 文字列として署名を取得する
saveAsBlob(type?)	Blob として署名を取得する
getBlob(type?)	署名の Blob を返す
load(signature)	Base64 または URL の署名を読み込む
refresh()	キャンバスを更新して再描画する
destroy()	コンポーネントを破棄する

主なイベント

イベント	発生するタイミング	主な引数
(change)	各ストロークの完了後	isEmpty
(beforeSave)	save() の実行前	fileName、fileType、cancel
(created)	コンポーネントの初期化時	—

よくあるユースケース

1. 契約書／合意書への署名 — ユーザーの署名を取得し、バックエンドで保存するために Base64 として保存する
2. フィードバックフォーム — クリア／元に戻すコントロール付きの埋め込み署名フィールド
3. 文書の承認 — 既存の署名を読み込み、フォーム送信前に空でないことを確認する
4. ツールバーを使った署名 — カラーピッカー、ストローク幅、元に戻す／やり直し、保存機能を備えた完全なツールバー
5. プログラムによる署名 — draw() メソッドを使って、入力された名前をスタイル付きの署名として描画する

---

詳しい実装については、references/signature-getting-started.md から始めてください

---

チェックボックス

Syncfusion Angular CheckBox（ejs-checkbox）は、ユーザーが1つ以上のオプションを選択できるグラフィカルなUI要素です。チェック済み、未チェック、不確定の状態、柔軟なラベル位置、サイズのバリエーション、ngModelによる双方向バインディング、完全なアクセシビリティ対応、豊富なCSSカスタマイズをサポートしています。

パッケージ： @syncfusion/ej2-angular-buttons
セレクター： ejs-checkbox
モジュール： CheckBoxModule

コンポーネントの概要

CheckBoxコンポーネントには、次の機能があります。

• 3つの状態： チェック済み、未チェック、不確定（一部選択）
• ラベルの制御： 前後の位置に配置できるキャプションテキスト
• サイズのバリエーション： デフォルトサイズと小サイズ（e-small）
• フォームのサポート： HTMLフォーム送信のためのname／value属性、ngModelによる双方向バインディング
• アクセシビリティ： WCAG 2.2、Section 508、キーボード操作（Spaceキー）、スクリーンリーダーのサポート
• スタイルのカスタマイズ： CSSクラスによる色のバリエーション、丸型の枠、カスタムチェックアイコン
• RTLサポート： 右から左への表示

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

⚠️ エージェントによる使用上の注意： タスクに関連するセクションだけを読んでください。すべての参照先を自動的に順番にたどらないでください。

はじめに

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

• ng addによる@syncfusion/ej2-angular-buttonsのインストール
• スタンドアロンコンポーネントのimports[]へのCheckBoxModuleのインポート
• CSSテーマのインポート（materialテーマ）
• 最小構成のejs-checkboxの設定とアプリの実行
• チェック済み、未チェック、不確定の状態

ラベルとサイズ

📄 参照： references/checkbox-label-and-size.md

• キャプションテキストを設定するlabelプロパティ
• labelPosition（"Before"／"After"）
• cssClass="e-small"による小サイズ
• デフォルトサイズと小サイズの例

スタイルと外観

📄 参照： references/checkbox-style-and-appearance.md

• cssClassによる色のバリエーション（primary、success、warning、danger、info）のカスタマイズ
• チェックボックスの枠形状のカスタマイズ（e-customによる丸型チェックボックス）
• e-checkiconによるカスタムチェックアイコン
• 外観を上書きするCSSルール

アクセシビリティとRTL

📄 参照： references/checkbox-accessibility.md

• WCAG 2.2／Section 508への準拠
• WAI-ARIA属性（aria-disabled）
• キーボード操作（Spaceキー）
• 右から左への表示（enableRtl）のサポート
• スクリーンリーダーのサポート

ハウツーガイド

📄 参照： references/checkbox-how-to.md

• フォーム送信時の名前と値
• ngModelによる双方向バインディング
• 右から左への表示の有効化
• チェックボックスの外観のバリエーションをカスタマイズ

APIリファレンス

📄 参照： references/checkbox-api.md

• すべてのプロパティ：checked、cssClass、disabled、enableHtmlSanitizer、enablePersistence、enableRtl、htmlAttributes、indeterminate、label、labelPosition、locale、name、value
• メソッド：click()、destroy()、focusIn()
• イベント：change、created

クイックスタートの例

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div class="e-section-control">
      <ejs-checkbox label="Default"></ejs-checkbox>
    </div>`
})
export class AppComponent { }

CSSテーマの設定（styles.css）：

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

よく使われるパターン

チェック済み、未チェック、不確定の状態

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ul>
      <li><ejs-checkbox label="Checked" [checked]="true"></ejs-checkbox></li>
      <li><ejs-checkbox label="Unchecked"></ejs-checkbox></li>
      <li><ejs-checkbox label="Indeterminate" [indeterminate]="true"></ejs-checkbox></li>
    </ul>`
})
export class AppComponent { }

changeイベントハンドラー

import { CheckBoxModule, ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-checkbox label="Subscribe" (change)="onChange($event)"></ejs-checkbox>`
})
export class AppComponent {
  onChange(args: ChangeEventArgs): void {
    console.log('Checked:', args.checked);
  }
}

nameとvalueを指定したフォーム送信

@Component({
  imports: [CheckBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <form>
      <ejs-checkbox name="Sport" value="Cricket" label="Cricket" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Hockey" label="Hockey" [checked]="true"></ejs-checkbox>
      <ejs-checkbox name="Sport" value="Tennis" label="Tennis" [disabled]="true"></ejs-checkbox>
      <button type="submit">Submit</button>
    </form>`
})
export class AppComponent { }

ngModelによる双方向バインディング

import { CheckBoxModule } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
import { Component } from '@angular/core';

@Component({
  imports: [CheckBoxModule, FormsModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-checkbox [(ngModel)]="isChecked" label="Enable Feature"></ejs-checkbox>
    <p>State: {{ isChecked }}</p>`
})
export class AppComponent {
  public isChecked: boolean = false;
}

主なプロパティ

プロパティ	型	デフォルト	目的
label	string	''	チェックボックスの横に表示するキャプションテキスト
checked	boolean	false	チェック状態
indeterminate	boolean	false	不確定（一部選択）状態
disabled	boolean	false	無効状態
labelPosition	'Before' | 'After'	'After'	ラベルの配置
cssClass	string	''	カスタム CSS クラス
name	string	''	フォームフィールド名
value	string	''	フォームフィールドの値
enableRtl	boolean	false	右から左への描画
enablePersistence	boolean	false	ブラウザーの localStorage を使用してページの再読み込み後も状態を保持します ⚠️ 機密性の高い状態やセキュリティ上重要な状態には有効にしないでください
htmlAttributes	object	{}	追加の HTML 属性

主なメソッド

メソッド	目的
click()	プログラムからチェックボックスを切り替えます
focusIn()	チェックボックス要素にフォーカスを設定します
destroy()	コンポーネントのインスタンスを破棄します

主なイベント

イベント	発生時	主な引数
(change)	チェック状態が変化したとき	checked, event
(created)	コンポーネントの初期化時	—

一般的な使用例

1. 複数選択フォームフィールド — name／value を設定したチェックボックスをグループ化してフォーム POST に使用します
2. すべて選択／不確定状態 — 子要素の状態に基づいて [indeterminate] を設定する親チェックボックス
3. 機能の切り替え — ngModel の双方向バインディングを使用する単一のチェックボックス
4. アクセシブルなフォーム — キーボード操作とスクリーンリーダーに対応した WCAG 準拠のチェックボックス
5. スタイル付きチェックボックス — cssClass を使用した円形または色違いのチェックボックス

---

詳しい実装については、references/checkbox-getting-started.md から始めてください。

OTP 入力

ワンタイムパスワード（OTP）や確認コードの入力フロー向けに設計された複数ボックス形式の入力コントロール、Syncfusion Angular ejs-otpinput コンポーネントの実装とカスタマイズに特化したスキルです。

パッケージ： @syncfusion/ej2-angular-inputs
セレクター： ejs-otpinput
モジュール： OtpInputModule

ナビゲーションガイド

はじめに

📄 読む： references/getting-started.md

• ng add によるインストール
• Angular のスタンドアロン構成とモジュール構成
• 基本的なコンポーネントの描画
• CSS／SCSS テーマのインポート
• autoFocus と事前入力された値

入力タイプと値

📄 読む： references/input-types-and-value.md

• 数値タイプ（数字のみ、デフォルト）
• テキストタイプ（英数字の OTP）
• パスワードタイプ（入力内容をマスク）
• textTransform（大文字／小文字／変換なし）
• 値プロパティの設定と読み取り

外観とレイアウト

📄 読む： references/appearance.md

• OTP の長さの設定
• 無効状態
• CSS クラス（e-success、e-warning、e-error）
• フィールド間の区切り文字
• プレースホルダー（1 文字またはフィールドごとの文字列）
• スタイルモード：アウトライン、塗りつぶし、下線

イベント

📄 読む： references/events.md

• created — コンポーネントの準備完了
• focus／blur — フィールドのフォーカスイベント
• input — 文字ごとの変更
• valueChanged — OTP 全体の入力完了／変更
• 実践例：OTP 入力完了時の検証と送信

アクセシビリティ

📄 読む： references/accessibility.md

• WCAG 2.2／Section 508／ADA 準拠表
• ARIA 属性（role=group、aria-label）
• フィールドごとのスクリーンリーダー用テキストを設定する ariaLabels プロパティ
• 追加の HTML 属性を設定する htmlAttributes
• キーボード操作のショートカット
• RTL サポート（enableRtl）

API リファレンス

📄 読む： references/api.md

• 型とデフォルト値を含むすべてのプロパティ
• メソッド：focusIn、focusOut、destroy
• 引数のインターフェースを含むすべてのイベント
• 列挙型：OtpInputStyle、OtpInputType、TextTransform

---

クイックスタート

// app.ts (Angular 19+ standalone)
import { Component } from '@angular/core';
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [OtpInputModule],
  selector: 'app-root',
  template: `
    <div style="width: 350px;">
      <div ejs-otpinput
        id="otpinput"
        [length]="6"
        placeholder="x"
        (valueChanged)="onOtpComplete($event)">
      </div>
    </div>
  `
})
export class AppComponent {
  onOtpComplete(args: any) {
    console.log('OTP entered:', args.value);
  }
}

/* styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';

---

よくあるパターン

数字の PIN（4 桁）

<div ejs-otpinput [length]="4" type="number"></div>

マスクされたパスワード入力

<div ejs-otpinput [length]="6" type="password"></div>

区切り文字と入力済みスタイルを使った OTP

<div ejs-otpinput [length]="6" separator="-" stylingMode="filled"></div>

OTP の入力完了時に自動送信

<div ejs-otpinput [length]="6" (valueChanged)="submitOtp($event)"></div>

認証失敗後のエラー状態

<div ejs-otpinput [length]="6" cssClass="e-error" [disabled]="false"></div>

ARIA ラベルを使ったアクセシブルな OTP

<div ejs-otpinput
  [length]="4"
  [ariaLabels]="['Digit 1', 'Digit 2', 'Digit 3', 'Digit 4']">
</div>

Syncfusion Angular Range Slider の実装

Range Slider は Syncfusion EJ2 Angular の多用途な入力コンポーネントで、連続した範囲から単一の値または範囲を選択できます。複数のスライダータイプ、カスタム書式設定、キーボードナビゲーション、高度なアクセシビリティ機能をサポートしています。

コンポーネントの概要

Syncfusion Angular Range Slider（ejs-slider）は、以下の機能を提供します。

• 3 種類のスライダータイプ： Default（単一）、MinRange（開始位置から現在位置まで）、Range（2 つのハンドル）
• 向き： 水平方向および垂直方向
• インタラクティブな要素： ツールチップ、増加／減少ボタン、目盛り、制限
• 高度な機能： カスタム書式設定、キーボードショートカット、RTL サポート
• 完全なアクセシビリティ： WCAG 2.2、Section 508、キーボードナビゲーション、ARIA 属性
• フォーム連携： リアクティブフォームおよびテンプレート駆動フォームのサポート

スライダータイプの概要

タイプ	用途	ハンドル数	表示
Default	単一の値を選択	1	つまみが 1 つあるシンプルなスライダー
MinRange	開始位置から現在位置までの範囲	1	最小値からつまみまでの選択範囲を表示
Range	最小値／最大値の範囲を選択	2	2 つのつまみの間の選択範囲を表示

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

はじめに

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

• @syncfusion/ej2-angular-inputs のインストール
• パッケージのセットアップとインポート
• CSS テーマの設定
• 最初に動作するサンプル
• スライダータイプの概要

スライダータイプと向き

📄 参照先： references/slider-types-and-orientation.md

• Default、MinRange、Range タイプの使い分け
• 水平スライダーの実装（デフォルト）
• 省スペースなレイアウト向けの垂直スライダー
• 実用的な実装例
• タイプ選択の判断表

目盛り、マーク、制限

📄 参照先： references/ticks-and-limits.md

• スライダートラックへの目盛りの追加
• 目盛りラベルと書式の設定
• 最小値／最大値の制限と境界の設定
• ステップ値の設定
• 目盛りのカスタム配置

ツールチップとボタン

📄 参照先： references/tooltips-and-buttons.md

• ツールチップの有効化／無効化
• ツールチップの配置（Before、After、Above、Below）
• 増加／減少ボタンの設定
• Range スライダーでのボタンの動作
• キーボードフォーカスの管理

書式設定と値の表示

📄 参照先： references/formatting-and-values.md

• 数値、パーセンテージ、通貨の書式設定に使う Format API
• イベントを使った値のカスタム書式設定
• 国際化のサポート
• renderingTicks イベントを使ったラベルの変換
• tooltipChange イベントを使ったツールチップのカスタマイズ

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

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

• トラック、ハンドル、ボタン、目盛り用の CSS クラス
• 色と寸法のカスタマイズ
• Theme Studio との連携
• RTL（右から左へ記述する言語）のサポート
• レスポンシブデザインのパターン

フォーム、検証、アクセシビリティ

📄 参照先： references/form-integration-and-accessibility.md

• FormControl を使ったリアクティブフォーム
• ngModel を使ったテンプレート駆動フォーム
• フォームの検証とエラー状態
• WCAG 2.2 および Section 508 への準拠
• キーボードショートカット（矢印キー、Home、End、PageUp／PageDown）
• ARIA 属性とスクリーンリーダーのサポート

高度なシナリオ

📄 参照： references/advanced-scenarios.md

• 日付範囲スライダーの実装
• 時刻範囲スライダーの実装
• 書式設定付き数値範囲スライダー
• 非表示状態からスライダーを表示
• パフォーマンス最適化のヒント
• よくある問題とトラブルシューティング

API リファレンス

📄 参照： references/api.md

• プロパティ一覧（value、type、min、max、step、orientation、ticks、tooltip、limits、colorRange、enabled、readonly、showButtons、customValues、enableRtl、cssClass、width、enableAnimation、enablePersistence）
• すべてのイベント（change、changed、created、renderingTicks、renderedTicks、tooltipChange）
• メソッド（destroy、reposition）
• データモデル：TicksDataModel、TooltipDataModel、LimitDataModel、ColorRangeDataModel
• EJ1 → EJ2 移行表
• ドキュメントに記載された API のみを使用した、検証済みコード例

クイックスタートの例

Angular 21 以降での最小限の範囲スライダー（スタンドアロン）の例です。

import { SliderModule } from '@syncfusion/ej2-angular-inputs';
import { Component } from '@angular/core';

@Component({
  imports: [SliderModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <div id="container">
      <h3>Range Slider</h3>
      <ejs-slider 
        id="range-slider"
        type="Range"
        [min]="0"
        [max]="100"
        [value]="[20, 80]"
        (change)="onSliderChange($event)">
      </ejs-slider>
      <p>Selected range: {{ selectedRange | json }}</p>
    </div>
  `,
  styles: [`
    #container {
      padding: 20px;
    }
    ejs-slider {
      width: 300px;
    }
  `]
})
export class App {
  selectedRange = [20, 80];

  onSliderChange(event: any) {
    this.selectedRange = event.value;
    console.log('Range changed:', this.selectedRange);
  }
}

CSS テーマの設定（styles.css 内）：

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

よくあるパターン

パターン 1：制限付き範囲スライダー

<ejs-slider 
  type="Range"
  [min]="0"
  [max]="100"
  [value]="[25, 75]"
  [limits]="{ enabled: true, minStart: 10, minEnd: 90 }">
</ejs-slider>

パターン 2：目盛りとツールチップ付きスライダー

<ejs-slider 
  type="Default"
  [value]="50"
  [ticks]="{ placement: 'Before', largeStep: 10, smallStep: 5 }"
  [tooltip]="{ isVisible: true, placement: 'After' }">
</ejs-slider>

パターン 3：垂直スライダー

<ejs-slider 
  type="Range"
  [value]="[30, 70]"
  orientation="Vertical"
  [style.height]="'300px'">
</ejs-slider>

パターン 4：パーセント形式のスライダー

<ejs-slider 
  type="Range"
  [value]="[20, 80]"
  [ticks]="{ format: 'P0' }"
  [tooltip]="{ format: 'P0' }">
</ejs-slider>

主なプロパティと設定

プロパティ

プロパティ	型	デフォルト	用途
type	string	'Default'	スライダーの種類：'Default'、'MinRange'、'Range'
value	number | number[]	null	現在の値。Range タイプでは number[] を使用します
min	number	0	スライダーの最小値
max	number	100	スライダーの最大値
step	number	1	操作ごとの増減量
orientation	string	'Horizontal'	'Horizontal' または 'Vertical'
ticks	TicksDataModel	—	目盛り（配置、largeStep、smallStep、書式）
tooltip	TooltipDataModel	—	ツールチップ（isVisible、placement、showOn、書式）
limits	LimitDataModel	—	スライダーつまみの移動を制限します。enabled: true の設定が必要です
colorRange	ColorRangeDataModel[]	—	トラックに適用する色の区分
enabled	boolean	true	スライダーを有効または無効にします
readonly	boolean	false	値を表示しますが、ユーザー操作を無効にします
showButtons	boolean	false	増減ボタンを表示します
enableRtl	boolean	false	右から左への表示
customValues	string[] | number[]	null	離散値の配列。min/max/step を上書きします
cssClass	string	''	スライダーのホスト要素に適用するカスタム CSS クラス
width	number | string	null	スライダーの幅（px または CSS 文字列）
enableAnimation	boolean	true	スライダーつまみの移動をアニメーション表示します
enablePersistence	boolean	false	再読み込み後も localStorage に値を保持します
locale	string	''	値の書式設定に使用するロケールの上書き

イベント

イベント	発生タイミング	引数の主なプロパティ
(change)	ドラッグ中（連続）	args.value、args.previousValue
(changed)	ドラッグ完了後（1 回）	args.value、args.previousValue
(created)	スライダーの初期化時	—
(renderingTicks)	各目盛りの描画時	args.value。args.text を設定します
(renderedTicks)	すべての目盛りの描画後	args.ticksWrapper（DOM）
(tooltipChange)	ツールチップの表示直前	args.value。args.text を設定します

メソッド（@ViewChild 経由）

メソッド	戻り値	用途
reposition()	void	非表示状態から表示した後に再描画します
destroy()	void	コンポーネントを削除し、イベントリスナーを切り離します

一般的なユースケース

ユースケース 1：価格フィルター

• 種類：範囲
• 範囲：$0～$1000（$100 刻み）
• 形式：通貨（例：「$250」）
• ツールチップ：通貨形式で表示

ユースケース 2：日付範囲セレクター

• 種類：範囲
• 範囲：0～365（日）
• 形式：カスタム（数値から日付文字列を生成）
• 目盛り：月単位

ユースケース 3：音量コントロール

• 種類：デフォルト
• 範囲：0～100
• 形式：パーセンテージ（0%～100%）
• 向き：垂直

ユースケース 4：バリデーション付きフォーム入力

• 種類：範囲
• 統合：リアクティブな FormControl
• バリデーション：最小 20、最大 80
• 無効な状態ではエラーを表示

次のステップ

1. 「はじめに」から始める - コンポーネントをセットアップし、種類を理解します
2. スライダーの種類を選ぶ - 「スライダーの種類と向き」を読みます
3. 機能を設定する - 必要に応じて目盛り、ツールチップ、ボタンを追加します
4. 値をフォーマットする - パーセンテージ、通貨、またはカスタム形式を実装します
5. アクセシビリティを追加する - キーボード操作と ARIA 属性を確認します
6. スタイルを設定してカスタマイズする - テーマと CSS のカスタマイズを適用します
7. フォームと統合する - バリデーションを設定して FormControl または ngModel にバインドします
8. エッジケースに対応する - 高度なシナリオとトラブルシューティングを確認します

---

詳細な実装については、references/getting-started.md から始めてください

Syncfusion Angular TextArea コンポーネント

Syncfusion Angular TextArea（ejs-textarea）は、フローティングラベル、リサイズモード、装飾要素、フォーム統合、完全なアクセシビリティサポートを備えた、多機能な複数行テキスト入力コンポーネントです。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストール（@syncfusion/ej2-angular-inputs）
• Angular 19 以降でのスタンドアロンコンポーネントのセットアップ
• CSS／テーマのインポート
• TextArea の基本的なレンダリング
• 値の取得と設定（value プロパティ、ngModel、change イベント）

設定

📄 参照： references/configuration.md

• フローティングラベル（floatLabelType：Auto／Always／Never）
• ローカライズ対応プレースホルダー（locale プロパティ）
• 行数と列数（rows／cols プロパティ）
• 最大文字数（maxLength プロパティ）
• リサイズモード（resizeMode：Vertical／Horizontal／Both／None）
• 幅のカスタマイズ（width プロパティ）

装飾要素

📄 参照： references/adornments.md

• カスタムテンプレートの前後への追加（prependTemplate／appendTemplate）
• 装飾要素の配置と向き（adornmentFlow／adornmentOrientation）
• 一般的なパターン：アイコン、書式設定ボタン、アクションボタン

イベント

📄 参照： references/events.md

• created、destroyed ライフサイクルイベント
• input — リアルタイムの値変更（InputEventArgs）
• change — フォーカスが外れたときの値変更（ChangedEventArgs）
• focus／blur — フォーカス状態イベント（FocusInEventArgs／FocusOutEventArgs）

スタイルと外観

📄 参照： references/style-appearance.md

• サイズのバリエーション（e-small、e-bigger）
• 塗りつぶしモードとアウトラインモード（e-filled、e-outline）
• cssClass プロパティによるカスタム CSS
• 無効（enabled: false）状態と読み取り専用（readonly: true）状態
• クリアボタンの表示／非表示（showClearButton）
• 角丸、常時表示のクリアボタン、RTL（enableRtl）
• 背景色、文字色、枠線色のカスタム設定
• バリデーション状態に応じたフローティングラベルの色

フォームのサポート

📄 参照： references/form-support.md

• HTML フォームとの統合
• FormValidator との統合（required、minLength、maxLength、pattern）
• 状態の保持（enablePersistence）
• カスタム HTML 属性（htmlAttributes）

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ、メソッド、イベントとその型およびデフォルト値
• Enum 型：FloatLabelType、Resize、AdornmentsDirection

クイックスタート

ng add @syncfusion/ej2-angular-inputs

import { Component } from '@angular/core';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule],
  selector: 'app-root',
  template: `
    <ejs-textarea
      id="comments"
      placeholder="Enter your comments"
      [floatLabelType]="'Auto'"
      [rows]="4"
      [maxLength]="500">
    </ejs-textarea>
  `
})
export class AppComponent {}

/* styles.css */
@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material3.css';

一般的なパターン

ngModel による双方向バインディング

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextAreaModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  standalone: true,
  imports: [TextAreaModule, FormsModule],
  selector: 'app-root',
  template: `<ejs-textarea [(ngModel)]="comment" placeholder="Add comment"></ejs-textarea>`
})
export class AppComponent {
  comment: string = '';
}

無効化された TextArea

<ejs-textarea [enabled]="false" value="Read-only content"></ejs-textarea>

サイズ変更コントロール

<ejs-textarea resizeMode="Vertical" [rows]="4"></ejs-textarea>


<ejs-textarea resizeMode="None" [rows]="4" [cols]="50"></ejs-textarea>

フローティングラベル付き

<ejs-textarea floatLabelType="Auto" placeholder="Description"></ejs-textarea>

ColorPicker

Syncfusion Angular ColorPicker では、ビジュアルピッカー（HSV ＋ 不透明度）または色見本のパレットから色を選択できます。デフォルトでは SplitButton として表示され（ポップアップを開きます）、インライン表示にも対応しています。また、RGB、HSV、Hex のカラー形式をサポートしています。

パッケージ： @syncfusion/ej2-angular-inputs
コンポーネント： <ejs-input ejs-colorpicker type="color">

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Vite または Angular CLI を使用したインストール
• npm パッケージのセットアップ
• CSS テーマのインポート
• 最小限の実用例
• アプリケーションの実行

モードとカラー値

📄 参照： references/modes-and-value.md

• インライン表示とポップアップ（SplitButton）
• ピッカーモードとパレットモード
• 初期カラー値の設定（hex コード）
• 不透明度のサポート
• パレットのみの表示（モードの固定）

パレット機能

📄 参照： references/palette-features.md

• カスタムカラーパレット（presetColors）
• カスタムパレットタイルのレンダリング（beforeTileRender）
• 色なし／色のクリアのサポート（noColor）
• カスタムの色なしオプション
• 最近使用した色の表示（showRecentColors）
• パレットの列数（columns）

UI のカスタマイズ

📄 参照： references/ui-customization.md

• 入力値エリアを非表示にする
• カスタムピッカーハンドル
• アイコン付きカスタムプライマリボタン
• 入力要素に hex コードを表示する
• コントロールボタン（適用／キャンセル）を非表示にする
• CSS クラスのオーバーライドと Theme Studio
• SplitButton と Dialog を使用した Excel 風のカスタム UI

統合と高度な機能

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

• ColorPicker を DropDownButton に埋め込む
• ポップアップの切り替え制御
• ページの再読み込み後も状態を保持する
• モード切り替え機能の表示とイベント
• 無効状態

ローカライズと RTL

📄 参照： references/localization-and-rtl.md

• 適用／キャンセル／ModeSwitcher のラベルをローカライズする
• L10n を使用して翻訳オブジェクトを読み込む
• 右から左への表示（enableRtl）

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2 ／ Section 508 への準拠
• WAI-ARIA 属性
• キーボードナビゲーションのショートカット
• アクセシビリティの検証

API リファレンス

📄 参照： references/api.md

• すべてのプロパティと型、デフォルト値
• すべてのメソッドとシグネチャ
• すべてのイベントとペイロードの型

---

クイックスタート

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

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css";

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <div id="container">
      <div class="wrap">
        <h4>Choose Color</h4>
        <ejs-input ejs-colorpicker type="color" id="color-picker"></ejs-colorpicker>
      </div>
    </div>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

よくあるパターン

インラインピッカー（ポップアップなし）

<ejs-input ejs-colorpicker type="color" [inline]="true" [showButtons]="false"></ejs-colorpicker>

パレットのみのモード

<ejs-input ejs-colorpicker type="color" mode="Palette" [modeSwitcher]="false" [showButtons]="false"></ejs-colorpicker>

初期カラーの設定と変更の処理

import { Component } from '@angular/core';
import { ColorPickerEventArgs, ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" [value]="colorValue" (change)="onChange($event)"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public colorValue: string = '#ff5733';

  public onChange(args: ColorPickerEventArgs): void {
    console.log(args.currentValue.hex);  // e.g. "#ff5733"
    console.log(args.currentValue.rgba); // e.g. "rgba(255,87,51,1)"
  }
}

プリセットカラーを使用したカスタムパレット

import { Component } from '@angular/core';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color"
      mode="Palette"
      [presetColors]="presets"
      [columns]="4"
      [modeSwitcher]="false"
      [inline]="true"
      [showButtons]="false"
    ></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {
  public presets: { [key: string]: string[] } = {
    brand: ['#0078d4', '#106ebe', '#005a9e', '#004578'],
    accents: ['#e81123', '#ff8c00', '#00b294', '#68217a']
  };
}

不透明度スライダーを無効にする

<ejs-input ejs-colorpicker type="color" [enableOpacity]="false"></ejs-colorpicker>

色なしのサポート（選択をクリア）

<ejs-input ejs-colorpicker type="color"
  mode="Palette"
  [noColor]="true"
  [modeSwitcher]="false"
  [showButtons]="false"
></ejs-colorpicker>

ローカライズ（ドイツ語）

import { Component } from '@angular/core';
import { L10n } from '@syncfusion/ej2-base';
import { ColorPickerModule } from '@syncfusion/ej2-angular-inputs';

L10n.load({
  'de-DE': {
    colorpicker: {
      Apply: 'Anwenden',
      Cancel: 'Abbrechen',
      ModeSwitcher: 'Modus wechseln'
    }
  }
});

@Component({
  selector: 'app-root',
  template: `
    <ejs-input ejs-colorpicker type="color" locale="de-DE"></ejs-colorpicker>
  `,
  standalone: true,
  imports: [ ColorPickerModule]
})
export class AppComponent {}

---

主なプロパティ

プロパティ	型	デフォルト値	用途
value	string	'#008000ff'	初期色（3／4／6／8 桁の16進数）
mode	'Picker' | 'Palette'	'Picker'	最初に表示するパネル
inline	boolean	false	コンポーネントを直接表示します（ポップアップなし）
showButtons	boolean	true	適用／キャンセルボタンを表示します
modeSwitcher	boolean	true	モード切り替えボタンを表示します
noColor	boolean	false	パレットに「色なし」のタイルを追加します
presetColors	object	null	パレット用のカスタムカラーグループ
columns	number	10	パレットの列数
enableOpacity	boolean	true	不透明度スライダーを表示します
showRecentColors	boolean	false	最近使用した色のタイルを表示します（パレットのみ）
disabled	boolean	false	コンポーネントを無効にします
cssClass	string	''	ルート要素に適用するカスタム CSS クラス
enableRtl	boolean	false	右から左への表示
locale	string	''	ローカライズ用のロケール文字列

MaskedTextBox

Syncfusion Angular MaskedTextBox コンポーネントは、マスクパターンを適用して特定の入力形式を強制し、ユーザーが正しい構造でデータを入力できるようにします。電話番号、郵便番号、日付、IP アドレス、製品キーなど、入力形式を事前に定義する必要があるあらゆる場面に最適です。

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• npm を使用したインストール（@syncfusion/ej2-angular-inputs）
• MaskedTextBoxModule を使用した Angular モジュールの設定
• テーマ用の CSS のインポート
• 基本的な MaskedTextBox のレンダリング
• 形式を強制するための mask プロパティの設定

マスクの設定

📄 参照： references/mask-configuration.md

• 標準マスク要素のトークン（0、9、#、L、?、&、C、A、a、<、>、|、\）
• customCharacters プロパティを使用したカスタム文字
• 柔軟なパターンに対応する正規表現マスク（例：IP アドレス）
• promptChar によるプロンプト文字のカスタマイズ

装飾要素（前置／後置要素）

📄 参照： references/adornments.md

• ng-template を使用して入力欄の前後にアイコンやボタンを追加する
• 入力ガイダンス、クイックアクション、コンテキストラベル
• テンプレートバインディングの例

Angular との統合

📄 参照： references/angular-integration.md

• ngModel による双方向バインディング
• FormControl を使用したリアクティブフォーム
• コンポーネントのライフサイクルフック（ngOnInit、ngOnDestroy）
• Angular コンポーネントでの change イベントの処理
• プログラムからアクセスするためのテンプレート参照変数

スタイル、外観、カスタマイズ

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

• cssClass を使用したカスタムスタイル
• ラッパー、ホバー、フォーカス状態の CSS オーバーライド
• focus イベントを使用したフォーカス時のカーソル位置の設定（selectionStart、selectionEnd）
• type="tel" によるモバイルでのテンキー表示
• floatLabelType のオプション（Never、Always、Auto）

フォーム検証

📄 参照： references/form-validation.md

• Syncfusion FormValidator との統合
• カスタム検証ルールの定義
• customPlacement によるカスタムエラー配置
• promptChar を使用したマスク値の未入力部分の確認

API リファレンス

📄 参照： references/api.md

• すべてのプロパティ：mask、value、placeholder、floatLabelType、promptChar、customCharacters、cssClass、enabled、readonly、showClearButton、enableRtl、enablePersistence、htmlAttributes、locale、width
• メソッド：focusIn()、focusOut()、getMaskedValue()、destroy()、getPersistData()
• イベント：change、focus、blur、created、destroyed

クイックスタート

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaskedTextBoxModule } from '@syncfusion/ej2-angular-inputs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaskedTextBoxModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  mask: string = '000-000-0000';
}

app.component.html

<ejs-maskedtextbox
  [mask]="mask"
  placeholder="Enter phone number"
  floatLabelType="Auto">
</ejs-maskedtextbox>

よく使われるパターン

電話番号入力

<ejs-maskedtextbox
  mask="000-000-0000"
  placeholder="Phone"
  floatLabelType="Always">
</ejs-maskedtextbox>

正規表現マスクを使用した IP アドレス

<ejs-maskedtextbox
  mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]"
  placeholder="IP Address (ex: 212.212.111.222)"
  floatLabelType="Always">
</ejs-maskedtextbox>

カスタム AM/PM 時刻入力

// app.component.ts
export class AppComponent {
  customChars: { [key: string]: string } = {
    P: 'P,A,p,a',
    M: 'M,m'
  };
}

<ejs-maskedtextbox
  mask="00:00 >PM"
  [customCharacters]="customChars"
  placeholder="Time (ex: 10:00 PM)"
  floatLabelType="Always">
</ejs-maskedtextbox>

マスクされた値をプログラムから読み取る

// app.component.ts
import { ViewChild } from '@angular/core';

export class AppComponent {
  @ViewChild('maskInput') maskInput: any;

  getMaskedValue(): void {
    const maskedVal = this.maskInput.getMaskedValue(); // e.g., "123-456-7890"
    const rawVal = this.maskInput.value;               // e.g., "1234567890"
  }
}

<ejs-maskedtextbox
  #maskInput
  mask="000-000-0000"
  placeholder="Phone">
</ejs-maskedtextbox>

ngModel による双方向バインディング

// app.component.ts
export class AppComponent {
  phone: string = '';

  onPhoneChange(event: any): void {
    console.log('Phone changed to:', this.phone);
  }
}

<ejs-maskedtextbox
  [(ngModel)]="phone"
  mask="000-000-0000"
  (change)="onPhoneChange($event)"
  placeholder="Phone"
  floatLabelType="Auto">
</ejs-maskedtextbox>

Rating

Syncfusion Angular Rating コンポーネントを使用すると、ユーザーは視覚的なシンボル（デフォルトでは星）のセットから評価値を選択できます。精度モード、カスタムテンプレート、ツールチップ、ラベル、リセット、読み取り専用／無効状態、完全なアクセシビリティへの準拠、豊富な CSS カスタマイズに対応しています。

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

---

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• @syncfusion/ej2-angular-inputs のインストール
• Tailwind3 用 CSS テーマのインポート
• AppModule での Rating コンポーネントの最小限の設定
• 初期 value プロパティの設定
• Angular アプリの実行

選択とリセット

📄 参照： references/selection.md

• value による評価値の設定
• min による最小評価値の設定
• enableSingleSelection による単一選択モード
• allowReset によるリセットボタンの表示／非表示
• プログラムから実行する reset() メソッド

精度モード

📄 参照： references/precision-modes.md

• PrecisionType.Full — 整数単位の増分
• PrecisionType.Half — 0.5 単位の増分
• PrecisionType.Quarter — 0.25 単位の増分
• PrecisionType.Exact — 0.1 単位の増分
• 精度と初期値の組み合わせ

外観とカスタマイズ

📄 参照： references/appearance.md

• itemsCount による項目数の制御
• disabled によるコンポーネントの無効化
• visible によるコンポーネントの表示／非表示
• readOnly による読み取り専用モード
• cssClass による CSS のカスタマイズ（境界線の色、塗りつぶし色、項目の間隔、アイコン）
• CSS による評価アイコンの変更

ラベル

📄 参照： references/labels.md

• showLabel による現在値ラベルの表示
• labelPosition のオプション：Top、Bottom、Left、Right
• labelTemplate によるカスタムラベルの内容

ツールチップ

📄 参照： references/tooltip.md

• showTooltip によるツールチップの有効化
• tooltipTemplate によるカスタムツールチップの内容
• cssClass によるツールチップの外観設定

テンプレート

📄 参照： references/templates.md

• 評価されていない項目用の emptyTemplate
• 評価された項目用の fullTemplate
• 絵文字の評価シンボル
• SVG アイコンの評価シンボル
• PNG 画像の評価シンボル
• --rating-value によるテンプレートでの精度サポート

イベント

📄 参照： references/events.md

• beforeItemRender — 描画前に項目をカスタマイズ
• created — コンポーネントの初期化後
• onItemHover — ホバーされた項目を追跡
• valueChanged — ユーザーによる評価の変更に応答

アクセシビリティ

📄 参照： references/accessibility.md

• WCAG 2.2／Section 508／ADA への準拠
• WAI-ARIA 属性（role=slider、aria-valuemin/max/now）
• キーボード操作のショートカット
• enableRtl による RTL サポート
• スクリーンリーダーのサポート

API リファレンス

📄 参照： references/api.md

• 型とデフォルト値を含むすべてのプロパティ、メソッド、イベント
• RatingItemEventArgs、RatingHoverEventArgs、RatingChangedEventArgs
• LabelPosition および PrecisionType 列挙型

---

クイックスタート

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

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-angular-inputs/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css";

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, RatingModule],
  bootstrap: [AppComponent],
})
export class AppModule { }

<input ejs-rating id="rating" [value]="3"></ejs-rating>

---

よく使われるパターン

値変更ハンドラーを備えた評価

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';
import { RatingChangedEventArgs } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="rating" (valueChanged)="onValueChanged($event)"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  rating: number = 3;

  onValueChanged(args: RatingChangedEventArgs) {
    this.rating = args.value;
  }
}

ラベル付きの半精度評価

import { Component } from '@angular/core';
import { RatingModule, PrecisionType } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="3.5"
      [precision]="precision"
      [showLabel]="true"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent {
  precision = PrecisionType.Half;
}

読み取り専用の評価（表示のみ）

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `
    <input ejs-rating
      id="rating"
      [value]="4"
      [readOnly]="true"
      [showTooltip]="false"
    ></ejs-rating>
  `,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

リセットボタン付きの評価

import { Component } from '@angular/core';
import { RatingModule } from '@syncfusion/ej2-angular-inputs';

@Component({
  selector: 'app-root',
  template: `<input ejs-rating id="rating" [value]="3" [allowReset]="true"></ejs-rating>`,
  standalone: true,
  imports: [RatingModule],
})
export class AppComponent { }

---

主なプロパティ一覧

プロパティ	型	デフォルト	用途
value	number	0.0	現在の評価値
itemsCount	number	5	評価項目の数
min	number	0.0	選択可能な最小値
precision	PrecisionType | string	Full	評価の刻み幅
allowReset	boolean	false	リセットボタンを表示する
readOnly	boolean	false	ユーザー操作を防止する
disabled	boolean	false	コンポーネントを無効にする
visible	boolean	true	コンポーネントを表示／非表示にする
showLabel	boolean	false	現在値のラベルを表示する
labelPosition	LabelPosition | string	Right	ラベルの配置
showTooltip	boolean	true	ホバー時にツールチップを表示する
enableSingleSelection	boolean	false	1 項目のみ選択する
enableAnimation	boolean	true	ホバー時のアニメーション
enableRtl	boolean	false	右から左への表示モード
cssClass	string	''	カスタム CSS クラス

---