syncfusion-angular-dropdowns

Name: syncfusion-angular-dropdowns
Author: syncfusion

github.com/syncfusionデザイン・UI0283 回インストール1 週間前に更新

syncfusion-angular-dropdowns について

syncfusion-angular-dropdowns は、Angular で Syncfusion のドロップダウンコンポーネント、特に AutoComplete を実装するためのスキルです。データ連携、フィルタリング、テンプレート、フォーム、アクセシビリティとセキュリティを扱い、ローカルデータを既定とします。

主な機能

01AutoComplete の候補表示と自由入力
02フィルタリング、グループ化、自動補完
03テンプレートと仮想スクロール
04Angular フォームとアクセシビリティのガイダンス
05データソースのセキュリティ指針

活用シーン

01入力候補付き検索フィールドの構築
02オブジェクトデータの候補をグループ表示
03仮想スクロールによる大量候補の処理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-dropdowns

インストール後、Claude Code で/syncfusion-angular-dropdownsを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/

autocomplete-accessibility-and-localization.md

autocomplete-advanced-patterns-how-to.md

autocomplete-api.md

autocomplete-data-binding.md

autocomplete-feature-configuration.md

autocomplete-filtering-and-search.md

autocomplete-form-support-and-validation.md

autocomplete-getting-started.md

autocomplete-grouping-and-templates.md

combobox-accessibility-and-localization.md

combobox-advanced-patterns-and-how-to.md

combobox-api.md

combobox-data-binding.md

combobox-feature-configuration.md

combobox-filtering-and-search.md

combobox-form-support-and-validation.md

combobox-getting-started.md

combobox-grouping-and-templates.md

dropdownlist-api.md

dropdownlist-customization-and-styling.md

dropdownlist-data-binding.md

dropdownlist-disabled-items-and-forms.md

dropdownlist-filtering.md

dropdownlist-getting-started.md

dropdownlist-grouping-and-virtualization.md

dropdownlist-how-to.md

dropdownlist-templates.md

listbox-api.md

listbox-customization.md

listbox-data-binding.md

詳細

Syncfusion Angular ドロップダウンの実装

セキュリティと信頼境界

デフォルトの方針：ローカルデータのみ

このスキルのすべてのドロップダウンコンポーネントは、デフォルトでローカルのメモリ内データソースを使用します。 コンポーネントをリモート HTTP エンドポイント（DataManager または Observable／HTTP ソース経由）にバインドすることは、デフォルトではなく、リスクが高い操作です。本番コードで許可する前に、明示的なセキュリティレビューが必要です。

⛔ 利用側のアプリケーションが、次の条件を満たしていることを確認するセキュリティレビューに合格していない限り、リモートの DataManager／HTTP データソース設定を生成または提案しないでください。

対象のエンドポイントを、アプリケーションと同じチームが所有し、運用していること。

エンドポイントで認証、認可、入力検証が適用されていること。

すべてのレスポンスをサニタイズしてから、コンポーネントの dataSource にバインドすること。

対象のオリジンをカバーするコンテンツセキュリティポリシー（CSP）が設定されていること。

必須のセキュリティ要件

#	要件
1	デフォルトではローカルデータを使用します。リモートソースが明示的に承認されていない限り、`dataSource` には通常の TypeScript 配列を使用してください。
2	公開 URL やサードパーティ URL は使用しません。アプリケーション自身のオリジン外にあるエンドポイントからデータを取得するデータソースは、決して設定しないでください。
3	バインド前にすべての外部データをサニタイズします。アプリケーション外部に由来する値（API レスポンス、local-storage からの読み取り）は、`dataSource` または `value` に代入する前に HTML／スクリプトコンテンツを除去する必要があります。
4	ユーザーのフィルター入力をサニタイズします。入力されたテキストをサーバーのクエリに転送する前に、インジェクションを防ぐため、英数字以外の文字を除去してください。
5	デフォルトでは `crossDomain: true` を使用しません。 `DataManager` で CORS 制限を緩和する場合は、明確な理由を示し、レビューを受ける必要があります。
6	パッケージのバージョンを固定します。すべての `@syncfusion/ej2-*` 依存関係は、`package.json` で厳密なバージョンに固定してください。インストールのたびにロックファイルと照合してください。
7	SRI なしで CDN アセットを読み込みません。 CSS／JS はビルド時に `node_modules` から解決し、サブリソース完全性ハッシュなしで実行時に CDN から取得してはなりません。
8	ローカルストレージに機密データを保存しません。 `enablePersistence` でトークン、認証情報、個人を特定できる情報（PII）を保存してはなりません。読み戻した値は、使用前にサニタイズしてください。

AutoComplete

ユーザーの入力に応じて一致する候補を提示するテキスト入力コンポーネントです。自由形式の入力、リモートデータ、フィルター方式、グループ化、仮想スクロール、および Angular フォームとの完全な連携をサポートします。

コンポーネントの概要とアーキテクチャ

AutoComplete は、ユーザーの入力に応じて一致する候補を提示するテキスト入力コンポーネントです。次の用途に対応しています。

入力候補の提示 — ユーザーの入力に応じて、データソースから一致する項目を表示します
自由形式の入力 — リストに制限されず、ユーザーが任意の値を入力できます
検索／フィルター — 複数のフィルター方式（StartsWith、Contains、EndsWith）に対応します
オートフィル — 最初に一致した候補を入力欄に自動的に補完します
候補のグループ化 — groupBy フィールドで項目を分類します
仮想スクロール — 数千件の項目を効率的に処理します
テンプレートのカスタマイズ — 項目、グループ、ヘッダー、フッター、空の状態のテンプレートに対応します

主な特長

項目	詳細
選択	単一項目。ユーザーは自由形式の値も入力できます
データソース	ローカル配列、リモート DataManager、OData、Web API、Observable（async pipe）
フィルタリング	組み込みフィルター：`StartsWith`、`EndsWith`、`Contains`
オートフィル	ユーザーの入力に応じて、最初に一致した候補をインラインで補完します
パフォーマンス	大規模なデータセット（1,000 件以上）には仮想スクロールを使用します
フォーム	テンプレート駆動（`ngModel`）およびリアクティブ（`FormControl`）フォームと連携します
アクセシビリティ	WCAG 2.2 に準拠し、完全なキーボード操作と ARIA 属性に対応します
カスタマイズ	項目、グループ、ヘッダー、フッター、noRecords、actionFailure の各テンプレート、および CSS テーマに対応します

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

📄 はじめに

参照： references/autocomplete-getting-started.md

@syncfusion/ej2-angular-dropdowns パッケージをインストールします
スタンドアロンコンポーネントを使用して Angular 21 以降のプロジェクトをセットアップします
AutoCompleteModule と必要な CSS テーマをインポートします
基本的なデータバインディングを使って、最初の AutoComplete を作成します
ポップアップの高さ、幅、プレースホルダーを設定します
[(value)] を使って双方向バインディングを有効にします

📄 データバインディング

参照： references/autocomplete-data-binding.md

ローカル配列（文字列、数値、オブジェクト、複合オブジェクト）にバインドします
fields プロパティを使って value、text、iconCss フィールドをマッピングします
DataManager と OData、Web API アダプターを使ってリモートデータを扱います
RxJS Observable に対する Async パイプパターン
allowObjectBinding を使ったオブジェクトバインディング
value プロパティを使って値を事前選択します

📄 フィルタリングと検索

参照： references/autocomplete-filtering-and-search.md

filterType（StartsWith、Contains、EndsWith）を設定します
suggestionCount を使って候補数を制限します
minLength を使って最小文字数を設定します
ignoreCase を使って大文字と小文字を区別したフィルタリングを行います
ignoreAccent を使って発音区別符号やアクセントを区別しないフィルタリングを行います
debounceDelay を使ってリモートフィルタリングを最適化するための遅延時間を設定します
filtering イベントと updateData を使ってカスタムフィルタリングを行います

📄 グループ化とテンプレート

参照： references/autocomplete-grouping-and-templates.md

fields.groupBy を使って候補をカテゴリ別にグループ化します
カスタム表示用のアイテムテンプレート
グループヘッダーテンプレート（インラインおよび固定）
ポップアップのヘッダーとフッターのテンプレート
noRecordsTemplate を使った空の状態
リモートデータのエラー用アクション失敗テンプレート

📄 機能の設定

参照： references/autocomplete-feature-configuration.md

オートフィル：autofill プロパティを使ったインライン候補補完
highlight プロパティを使って一致した文字を強調表示します
fields.disabled または disableItem メソッドを使って個々の項目を無効にします
enabled プロパティを使ってコンポーネント全体を無効にします
allowResize を使ってポップアップのサイズ変更を可能にします
enableVirtualization を使って大規模なデータセットの仮想スクロールを有効にします
showPopupButton を使ってポップアップボタンを表示または非表示にします
showClearButton を使ってクリアボタンを表示または非表示にします
enableRtl を使って RTL をサポートします
sortOrder を使って並べ替え順を設定します

📄 フォームのサポートと検証

参照： references/autocomplete-form-support-and-validation.md

ngModel と FormsModule を使ったテンプレート駆動フォーム
FormControl、FormGroup、ReactiveFormsModule を使ったリアクティブフォーム
バインディングと検証のパターン
フォームモデルを使った値の事前選択

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

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

WCAG 2.2、Section 508、ADA への準拠
キーボードショートカットの完全なサポート（矢印キー、Tab、Enter、Escape、Alt+Down/Up）
ARIA 属性：aria-haspopup、aria-expanded、aria-selected、aria-autocomplete
スクリーンリーダーのサポートとフォーカス管理
L10n.load() を使った noRecordsTemplate と actionFailureTemplate のローカライズ
RTL 言語のサポート

📄 高度なパターンと使い方

参照： references/autocomplete-advanced-patterns-how-to.md

autofill プロパティを使った自動入力機能
highlight プロパティを使った検索文字の強調表示
Predicate による複数フィールドのカスタムフィルタリング（名前とコードの両方でフィルタリング）
fields.iconCss によるアイコンのサポート
ブラウザーのローカルストレージを使った、フォーカス時の候補リスト表示

⚠️ セキュリティに関する注意： ローカルストレージには、同一オリジンで実行されるあらゆる JavaScript からアクセスできます。また、一般的な XSS 攻撃の対象領域でもあります。機密データ（トークン、個人を特定できる情報など）はローカルストレージに保存しないでください。ローカルストレージから読み込んだ値をコンポーネントの dataSource または value にバインドする前に、必ずサニタイズしてください。
カスタム検索と強調表示のスタイル設定

📄 API リファレンス

参照： references/autocomplete-api.md

型、デフォルト値、説明を含むすべてのプロパティのリファレンス
すべてのメソッドのシグネチャと使い方
ペイロードの型とハンドラーの例を含むすべてのイベント

クイックスタートの例

// app.component.ts (Angular 21 Standalone)
import { Component } from '@angular/core';
import { AutoCompleteModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AutoCompleteModule],
  template: `
    <ejs-autocomplete
      id="sports"
      [dataSource]="sportsData"
      placeholder="Find a sport"
      [(value)]="selectedValue">
    </ejs-autocomplete>
  `
})
export class AppComponent {
  public sportsData: string[] = [
    'Badminton', 'Basketball', 'Cricket',
    'Football', 'Golf', 'Hockey', 'Tennis'
  ];
  public selectedValue: string = '';
}

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

⚠️ セキュリティに関する注意： 侵害された可能性のあるリリースへの意図しないアップグレードを防ぐため、パッケージのバージョンを固定してください。インストール後、インストールされたバージョンをロックファイル（package-lock.json / yarn.lock）と照合してください。

ng add @syncfusion/ej2-angular-dropdowns@<version>

CSS を追加します（styles.css）：

⚠️ セキュリティに関する注意： これらのインポートは、ビルド時に node_modules から解決されます。ビルド前に、インストール済みの Syncfusion パッケージのバージョンが package-lock.json または yarn.lock で固定したバージョンと一致していることを確認してください。サブリソース整合性（SRI）ハッシュを使わずに、これらのファイルを CDN から取得しないでください。

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

よく使われるパターン

パターン 1：複雑なオブジェクトデータのフィルタリング

// Map fields for object array
public fields: Object = { value: 'Game' };
public sportsData: { [key: string]: Object }[] = [
  { Id: 'Game1', Game: 'Badminton' },
  { Id: 'Game2', Game: 'Cricket' }
];

<ejs-autocomplete [dataSource]="sportsData" [fields]="fields" placeholder="Find a game">
</ejs-autocomplete>

使用する場面： データがオブジェクトの配列であり、候補テキストとして1つのフィールドを表示する必要がある場合に使用します。

パターン 2：自動入力と強調表示

<ejs-autocomplete
  [dataSource]="data"
  [autofill]="true"
  [highlight]="true"
  filterType="StartsWith">
</ejs-autocomplete>

使用する場面： インライン補完と、一致したテキストの視覚的な強調表示をユーザーが期待する検索バーに使用します。

パターン 3：デバウンスを使ったリモートデータ

🔒 セキュリティポリシー — リモートデータは制限対象のパターンです。 AutoComplete をリモートエンドポイントにバインドする場合、本番環境で使用する前にセキュリティレビューが必要です（上記のセキュリティと信頼境界を参照してください）。リモートデータのバインドの詳細と要件は、references/autocomplete-data-binding.mdに記載されています。 ここでは、リモート DataManager の例をデフォルトでは提供していません。

使用する場面： リクエストの頻度を減らしたい API 連携のオートコンプリートに使用します。ただし、上記のセキュリティ要件に従って、エンドポイントとデータパイプラインのレビューを済ませてから使用してください。

パターン 4：大規模データセットでの仮想スクロール

import { AutoCompleteComponent, VirtualScroll } from '@syncfusion/ej2-angular-dropdowns';
AutoCompleteComponent.Inject(VirtualScroll);

<ejs-autocomplete
  [dataSource]="records"
  [fields]="fields"
  [enableVirtualization]="true"
  popupHeight="200px">
</ejs-autocomplete>

使用する場面： すべての DOM 要素を一度にレンダリングすると負荷が高くなる、1,000件以上のアイテムを含むデータセットに使用します。

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

プロパティ	型	デフォルト	目的
`dataSource`	Array \| DataManager	`[]`	候補の元データ
`fields`	FieldSettingsModel	`{ value: null }`	データ列をコンポーネントにマッピング
`placeholder`	string	`null`	空のときに表示するヒントテキスト
`value`	string \| number \| boolean \| object	`null`	選択または入力された値
`filterType`	FilterType	`'Contains'`	候補の照合方法
`minLength`	number	`1`	候補表示を開始する最小文字数
`suggestionCount`	number	`20`	表示する候補の最大数
`autofill`	boolean	`false`	最初に一致した候補をインライン補完
`highlight`	boolean	`false`	一致した文字をハイライト表示
`ignoreCase`	boolean	`true`	大文字と小文字を区別せずにフィルタリング
`ignoreAccent`	boolean	—	フィルタリング時にダイアクリティカルマークを無視
`debounceDelay`	number	`300`	フィルタリングが実行されるまでの遅延（ms）
`enableVirtualization`	boolean	`false`	大量データ向けの仮想スクロール
`allowResize`	boolean	`false`	サイズ変更可能なポップアップ
`showClearButton`	boolean	`true`	値をクリアする ✕ を表示
`showPopupButton`	boolean	`false`	ドロップダウン切り替えボタンを表示
`enabled`	boolean	`true`	コンポーネント全体の有効／無効を切り替え
`readonly`	boolean	`false`	ユーザーによる編集を禁止
`allowObjectBinding`	boolean	`false`	値を完全なオブジェクトとしてバインド
`sortOrder`	SortOrder	`null`	候補を並べ替え（昇順／降順）
`popupHeight`	string \| number	`'300px'`	ポップアップリストの高さ
`popupWidth`	string \| number	`'100%'`	ポップアップリストの幅
`locale`	string	`'en-US'`	ローカライズのカルチャ
`enableRtl`	boolean	`false`	右から左へのレンダリング

ワークフローの判断ツリー

Need to implement AutoComplete?
│
├─ What's your data source?
│   ├─ Local array → See Data Binding: "Array of string" or "Array of object"
│   └─ Remote API  → See Data Binding: "Bind to remote data"
│
├─ How should filtering work?
│   ├─ Default (Contains)   → No extra config needed
│   ├─ StartsWith           → filterType="StartsWith"
│   ├─ Custom multi-field   → See Advanced Patterns: "Custom filtering"
│   └─ Accent-insensitive   → [ignoreAccent]="true"
│
├─ Need autofill (inline completion)?
│   └─ YES → [autofill]="true" + filterType="StartsWith"
│
├─ Highlight matched text?
│   └─ YES → [highlight]="true"
│
├─ Large dataset (1,000+ items)?
│   └─ YES → [enableVirtualization]="true" + inject VirtualScroll
│
├─ Using inside a form?
│   ├─ Template-driven → See Form Support: "ngModel"
│   └─ Reactive        → See Form Support: "FormControl"
│
└─ Need accessibility or localization?
    └─ YES → See Accessibility & Localization reference

ComboBox

柔軟なドロップダウンコンポーネントです。定義済みリストから選択したり、カスタム値を入力したりできます。フィルタリング、グループ化、テンプレート、仮想スクロール、Angular フォームとの完全な連携をサポートします。

コンポーネントの概要とアーキテクチャ

ComboBox は柔軟なドロップダウンコンポーネントで、次の操作ができます。

定義済みオプションのリストから選択
allowCustom が有効な場合にカスタム値を入力
入力中に項目を検索／フィルタリング
カテゴリ別に項目をグループ化
項目、グループ、ヘッダー、フッターのテンプレートを使って表示をカスタマイズ

主な特長

項目	詳細
選択	定義済みリストからの単一項目、またはカスタム値
データソース	ローカル配列、リモート DataManager、OData、Web API、非同期データ
フィルタリング	設定可能な方式（StartsWith、Contains、EndsWith）による組み込みフィルタリング
パフォーマンス	大規模データセット（10,000 件以上）向けの仮想スクロール
フォーム	テンプレート駆動型フォーム（ngModel）とリアクティブフォーム（FormControl）に対応
アクセシビリティ	WCAG 2.2 準拠、完全なキーボード操作、ARIA 属性
カスタマイズ	項目、グループ、ヘッダーのテンプレート、CSS テーマ設定に対応

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

📄 はじめに

参照: references/combobox-getting-started.md

@syncfusion/ej2-angular-dropdowns パッケージをインストール
スタンドアロンコンポーネントを使用する Angular 21+ プロジェクトをセットアップ
必要なモジュールと CSS テーマをインポート
最小限のコードで最初の ComboBox を作成
基本的なイベントハンドラーと設定

📄 データバインディングとデータソース

参照: references/combobox-data-binding.md

ローカル配列（文字列、数値、オブジェクト）にバインド
複雑なデータのテキストフィールドと値フィールドをマッピング
Web API、OData サービスからのリモートデータ
さまざまなデータアダプター向けの DataManager 設定
RxJS Observable 向けの Async Pipe
動的なデータ更新への対応

📄 フィルタリングと検索

参照： references/combobox-filtering-and-search.md

allowFiltering プロパティでフィルタリングを有効にする
フィルターの種類（StartsWith、Contains、EndsWith など）を設定する
厳密に一致させるための大文字と小文字を区別したフィルタリング
アクセント記号を区別しない検索のためのダイアクリティカルマークのフィルタリング
リモートリクエストを最適化するためのデバウンス遅延
フィルタリングに必要な最小文字数
リモートクエリを使ったカスタムフィルタリング

📄 グループ化とテンプレート

参照： references/combobox-grouping-and-templates.md

groupBy フィールドを使ってカテゴリ別に項目をグループ化する
項目をカスタム表示するための項目テンプレート
グループヘッダーテンプレート（インラインおよび固定）
追加情報を表示するためのフッターテンプレート
複数のテンプレートを効果的に組み合わせる
テンプレートのパフォーマンス最適化

📄 高度な機能の設定

参照： references/combobox-feature-configuration.md

特定の項目またはコンポーネント全体を無効にする
表示専用の場面向けの読み取り専用モード
数千件の項目に対応する仮想スクロール
動的なサイズ変更動作
リストにないカスタム値を許可する
スタイル設定とテーマの統合
アラビア語／ヘブライ語向けの RTL サポート

📄 フォームのサポートと検証

参照： references/combobox-form-support-and-validation.md

テンプレート駆動フォーム（ngModel）での双方向バインディング
FormControl と FormGroup を使ったリアクティブフォーム
組み込みバリデーターとカスタムバリデーター
フォーム送信と検証状態
フォーム内での ComboBox の無効化
エラーメッセージの表示パターン

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

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

WCAG 2.2、Section 508、ADA への準拠
キーボードナビゲーションのショートカット（矢印キー、Tab、Enter、Escape）
ARIA 属性によるスクリーンリーダーのサポート
フォーカス管理と視覚的なインジケーター
各言語向けのローカライズ文字列
右から左へ記述する言語（RTL）のサポート

📄 高度なパターンと手順ガイド

参照： references/combobox-advanced-patterns-and-how-to.md

オートコンプリート動作のためのオートフィル候補
連動するドロップダウンを備えたカスケード ComboBox
リスト項目でのアイコンと絵文字のサポート
視認性を高めるポップアップのサイズ変更
実際の利用場面におけるパターン（検索、ライブデータ、グループ化）
パフォーマンス最適化の手法

📄 API リファレンス

参照： references/combobox-api.md

型、既定値、例を含むプロパティの完全なリファレンス
シグネチャ、パラメーター、使用例を含むすべてのメソッド
ペイロード型とハンドラーの例を含むすべてのイベント
テンプレート構文、双方向バインディング、仮想スクロールに関する注記
Syncfusion の公式ドキュメントへのリンク

クイックスタートの例

最小限のセットアップ（5 分）

// app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComboBoxComponent, ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ComboBoxModule],
  template: `
    <ejs-combobox
      [dataSource]="data"
      fields="{ text: 'text', value: 'id' }"
      placeholder="Select a language"
      [(ngModel)]="selectedValue">
    </ejs-combobox>
  `
})
export class AppComponent {
  selectedValue = '';
  data = [
    { id: '1', text: 'JavaScript' },
    { id: '2', text: 'TypeScript' },
    { id: '3', text: 'Angular' },
    { id: '4', text: 'React' }
  ];
}

ここで行っていること：

@syncfusion/ej2-angular-dropdowns から ComboBoxComponent をインポートする
オブジェクト（id、text）を含むデータ配列を定義する
fields を使ってテキストフィールドと値フィールドをマッピングする
[(ngModel)] で選択値をバインドする
空の状態に表示するプレースホルダーを設定する

よく使われるパターンとワークフロー

パターン 1：オートフィルを使ったオートコンプリート

[autofill]="true"              // Auto-complete suggestions
[allowFiltering]="true"        // Enable typing
filterType="StartsWith"        // Match from beginning

使用場面： スキル、タグ、メールドメイン（ユーザーが「j」と入力すると「JavaScript」が表示されます）

参照：高度なパターン

パターン 2：連動するドロップダウン

// Country → State → City relationship
onCountryChange() {
  this.states = this.getStatesFor(country);
}

onStateChange() {
  this.cities = this.getCitiesFor(state);
}

使用場面： 住所の選択、階層データ（国／州／市）

参照：高度なパターン

パターン 3：アイコン付きのグループ化された項目

fields = { 
  text: 'Name', 
  value: 'Id', 
  groupBy: 'Category',
  iconCss: 'Icon'
};

使用場面： 視覚的な整理（アイコン付きの言語、ファイルの種類）

参照：高度なパターン

パターン 4：長いコンテンツに対応したサイズ変更可能なドロップダウン

[allowResize]="true"           // Enable resize handle
itemTemplate="customTemplate"  // Show rich content

使用する場面： 商品一覧、説明、詳細情報

参照：高度なパターン

主なプロパティと設定

必須プロパティ

プロパティ	型	デフォルト	使用する場面
`dataSource`	Array \| DataManager	`[]`	表示する項目を指定します
`fields`	Object	`{ text, value }`	データ構造を ComboBox にマッピングします
`placeholder`	string	`''`	空のときにヒントを表示します
`allowFiltering`	boolean	`false`	検索／フィルタリングを有効にします
`allowCustom`	boolean	`false`	リストにない値を許可します
`readonly`	boolean	`false`	編集を禁止します
`enabled`	boolean	`true`	コンポーネント全体を無効にします
`[(ngModel)]`	any	undefined	双方向の値バインディング

高度なプロパティ

プロパティ	型	使用する場面
`itemTemplate`	string \| TemplateRef	項目の表示をカスタマイズします
`groupTemplate`	string \| TemplateRef	グループヘッダーの表示をカスタマイズします
`footerTemplate`	string \| TemplateRef	リストの下に情報を追加します
`enableVirtualization`	boolean	10,000 件以上の項目（パフォーマンス）
`groupBy`	string	カテゴリごとに項目を整理します
`filterType`	string	StartsWith \| Contains \| EndsWith
`debounceDelay`	number	リモートデータのリクエスト遅延

コンポーネントのライフサイクル

1. CREATE: Component initialized
   ↓
2. DATA BIND: dataSource loaded & displayed
   ↓
3. USER INTERACTION: typing, clicking, keyboard
   ↓
4. FILTER/SEARCH: items filtered based on input
   ↓
5. SELECT: user chooses item or enters custom value
   ↓
6. VALUE UPDATE: ngModel updates, events fire
   ↓
7. DESTROY: component cleaned up

処理する主なイベント：

change：選択した値が変更されたとき
filtering：ユーザーが入力したとき（フィルタークエリ）
select：項目が選択されたとき
focus：コンポーネントがフォーカスを取得したとき
blur：コンポーネントがフォーカスを失ったとき

ワークフローの判断ツリー

ComboBox を実装する必要がありますか？この判断ツリーに従ってください：

1. Do you have data to display?
   ├─ YES: Go to "Data Binding & Sources" reference
   └─ NO: Define your data array first

2. Do users need to search/filter?
   ├─ YES: Go to "Filtering & Search" reference
   └─ NO: allowFiltering = false (default)

3. Do you need to group items?
   ├─ YES: Go to "Grouping & Templates" reference
   └─ NO: Skip grouping configuration

4. Are you using a form?
   ├─ YES: Go to "Form Support & Validation" reference
   └─ NO: Use standalone ComboBox

5. Is accessibility required?
   ├─ YES: Go to "Accessibility & Localization" reference
   └─ NO: Still recommended for compliance

6. Performance issues with large datasets?
   ├─ YES: Enable virtual scrolling + pagination
   └─ NO: Standard rendering is fine

次のステップ

ここから開始： はじめに - 最初の ComboBox をセットアップします
データをバインド： データバインディングとデータソース - データに接続します
検索を追加： フィルタリングと検索 - ユーザーによるフィルタリングを有効にします
カスタマイズ： グループ化とテンプレート - 表示をスタイル設定し、整理します
高度な機能： 高度なパターンと使用方法 - オートフィル、カスケード、アイコン、サイズ変更
機能： 機能の設定 - 高度な機能を有効にします
統合： フォームのサポート - フォームに接続します
仕上げ： アクセシビリティ - 要件への準拠を確認します
リファレンス： API リファレンス - プロパティ、メソッド、イベントの完全なリファレンス

その他のリソース

DropDownList

事前定義されたリストから単一の値を選択するコンポーネントです。ローカルおよびリモートのデータソース、フィルタリング、グループ化、カスタムテンプレート、大規模なデータセット向けの仮想化、Angular フォームとの完全な統合をサポートします。

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

はじめに

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

インストールと Angular CLI のセットアップ
@syncfusion/ej2-angular-dropdowns のインストール
Material3 用の CSS／テーマのインポート
テンプレートへの <ejs-dropdownlist> の追加
[dataSource] による基本的なデータバインディング
ポップアップの高さ／幅の設定
[(value)] による双方向バインディング

データバインディング

📄 参照： references/dropdownlist-data-binding.md

プリミティブ配列（文字列、数値）のバインド
[fields] マッピングを使用したオブジェクト配列のバインド
ネストされたオブジェクトや複雑なオブジェクトへのバインド
DataManager（OData、Web API）を介したリモートデータ
Observable データストリームでの非同期パイプ
値のバインディング（allowObjectBinding を使用したプリミティブ型とオブジェクト型）

フィルタリング

📄 参照： references/dropdownlist-filtering.md

[allowFiltering] による検索の有効化
filtering イベントと updateData() メソッドの使用
フィルタリング開始前の最小文字数のしきい値
フィルターの種類：contains、startsWith、endsWith
大文字と小文字を区別するフィルタリング
ダイアクリティカルマーク／アクセント記号を区別しないフィルタリング
パフォーマンス最適化のためのデバウンス遅延

テンプレート

📄 参照： references/dropdownlist-templates.md

項目テンプレート：各リスト項目をカスタマイズ
値テンプレート：選択した値の表示をカスタマイズ
グループテンプレート：グループヘッダーの外観をカスタマイズ
ヘッダーテンプレート：ポップアップ上部の静的要素
フッターテンプレート：ポップアップ下部の静的要素
レコードなしテンプレート：空の状態の表示
アクション失敗テンプレート：エラー状態の表示

グループ化と仮想化

📄 参照： references/dropdownlist-grouping-and-virtualization.md

groupBy フィールドによる項目のグループ化
インラインおよび固定フローティングのグループヘッダー
大きなリスト向けの [enableVirtualization] による仮想スクロール
リモートデータでの仮想スクロール
フィルタリングと仮想化の併用
仮想モードでの項目数のカスタマイズ

無効な項目とフォーム

📄 参照： references/dropdownlist-disabled-items-and-forms.md

fields.disabled による特定の項目の無効化
動的な disableItem() メソッド（値、インデックス、または要素による指定）
[enabled]="false" によるコンポーネント全体の無効化
[(ngModel)] を使用したテンプレート駆動フォーム
FormControl と FormGroup を使用したリアクティブフォーム

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

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

ラッパー、アイコン、フォーカス状態の CSS オーバーライド
アウトラインテーマのフォーカスのカスタマイズ
ポップアップの外観とリスト項目のスタイル
フロートラベルとプレースホルダーのスタイリング
必須を示すアスタリスクのパターン
L10n クラスによるローカライズ
RTL（右から左）サポート

操作レシピ

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

項目の動的な追加／削除／クリア
ポップアップのプログラムによるクローズ
連動する DropDownLists
グループヘッダーテンプレートのカスタマイズ
フィルターに一致した文字の強調表示
インクリメンタル検索の動作
リモートデータの結果の変更
リモートデータの項目数の表示
リスト項目のツールチップ
値変更イベントの処理
リスト項目でのアイコンのサポート

API リファレンス

📄 参照： references/dropdownlist-api.md

型、デフォルト値、使用例を含むプロパティの完全なリファレンス
シグネチャ、パラメーター、戻り値の型を含むすべてのメソッド
引数インターフェースと使用例を含むすべてのイベント
インターフェースの詳細：FieldSettingsModel、ChangeEventArgs、SelectEventArgs、PopupEventArgs、FilteringEventArgs
プロパティ、メソッド、イベントのクイックリファレンス表

クイックスタートの例

import { Component, OnInit } from '@angular/core';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [DropDownListModule],
  selector: 'app-root',
  template: `
    <ejs-dropdownlist
      id="ddl"
      [dataSource]="sports"
      [fields]="fields"
      placeholder="Select a sport"
      [(value)]="selectedValue"
      (change)="onChange($event)">
    </ejs-dropdownlist>
    <p>Selected: {{ selectedValue }}</p>
  `
})
export class AppComponent implements OnInit {
  public sports: { id: number; name: string }[] = [];
  public fields = { text: 'name', value: 'id' };
  public selectedValue: number = 2;

  ngOnInit() {
    this.sports = [
      { id: 1, name: 'Badminton' },
      { id: 2, name: 'Cricket' },
      { id: 3, name: 'Football' },
      { id: 4, name: 'Tennis' }
    ];
  }

  onChange(args: any) {
    this.selectedValue = args.value;
  }
}

一般的なパターン

検索可能なドロップダウン

// Enable filtering in template
// <ejs-dropdownlist [allowFiltering]="true" (filtering)="onFilter($event)">
import { FilteringEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { Query } from '@syncfusion/ej2-data';

onFilter(args: FilteringEventArgs) {
  let query = new Query();
  query = args.text !== '' 
    ? query.where('name', 'contains', args.text, true) 
    : query;
  args.updateData(this.sports, query);
}

リモートデータのドロップダウン

🔒 セキュリティポリシー — リモートデータは制限対象のパターンです。 DropDownList をリモートエンドポイントにバインドする場合、本番環境で使用する前にセキュリティレビューが必要です（セキュリティと信頼境界を参照）。リモートデータのバインドの詳細と要件は、references/dropdownlist-data-binding.mdに記載されています。 ここでは、デフォルトでリモートのDataManagerの例は提供していません。

リアクティブフォームとの統合

import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';

// In component:
form = this.fb.group({ sport: ['Cricket', Validators.required] });
// In template:
// <form [formGroup]="form">
//   <ejs-dropdownlist formControlName="sport" [dataSource]="sports"></ejs-dropdownlist>
// </form>

主なプロパティ

プロパティ	型	説明
`dataSource`	`any[] \| DataManager`	リストのデータ
`fields`	`FieldSettingsModel`	テキスト、値、groupBy、disabled、iconCss のマッピング
`value`	`string \| number \| boolean \| object`	選択された値（双方向バインディングに対応）
`placeholder`	`string`	入力欄のプレースホルダーテキスト
`allowFiltering`	`boolean`	ポップアップ内の検索ボックスを有効化
`filterType`	`'contains' \| 'startsWith' \| 'endsWith'`	フィルターの一致方法
`enableVirtualization`	`boolean`	大きなリスト向けの仮想スクロール
`popupHeight` / `popupWidth`	`string \| number`	ポップアップの寸法
`enabled`	`boolean`	コンポーネント全体の有効／無効を切り替え
`allowObjectBinding`	`boolean`	値としてオブジェクト全体をバインド
`ignoreCase`	`boolean`	大文字と小文字を区別しないフィルタリング（デフォルト：true）
`ignoreAccent`	`boolean`	発音区別符号を区別しないフィルタリング
`debounceDelay`	`number`	フィルターが実行されるまでの遅延時間（ms）
`itemTemplate`	`string`	リスト項目のテンプレート
`valueTemplate`	`string`	選択した値を表示するテンプレート
`noRecordsTemplate`	`string`	空の状態を示すメッセージ

よくあるユースケース

バリデーション付きフォームフィールド → references/dropdownlist-disabled-items-and-forms.mdを参照

大きなリスト（1000 件以上） → [enableVirtualization]="true"を有効にしてください。詳しくはreferences/dropdownlist-grouping-and-virtualization.mdを参照

国／州／市の連動 → references/dropdownlist-how-to.mdを参照

項目のカスタム表示（アイコン、複数列） → references/dropdownlist-templates.mdを参照

リモート API データ → references/dropdownlist-data-binding.mdを参照

ListBox

単一または複数の項目を選択できる、リスト形式の選択コンポーネントです。データバインディング、テンプレート、ドラッグ＆ドロップによる並べ替えと転送、ソート、グループ化、包括的なアクセシビリティ機能に対応しています。

コンポーネントの概要

Syncfusion ListBox は、高度な機能を備えた高性能なドロップダウンリストの代替コンポーネントです。

機能	メリット
複数の選択モード	単一選択、複数選択、チェックボックス選択
データバインディング	ローカル配列、複雑なオブジェクト、リモートサービス
ドラッグ＆ドロップ	項目の並べ替え、またはリスト間での転送
カスタマイズ	アイコン、テンプレート、グループ化、ソート
アクセシビリティ	WCAG 2.2、スクリーンリーダー、キーボード操作
パフォーマンス	大規模なデータセットを効率的に描画

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

はじめに

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

インストールとパッケージのセットアップ
Angular のスタンドアロンと NgModule のパターン
コンポーネントの基本的な初期化
CSS のインポートとテーマの選択
ローカルデータソースのバインド
アプリケーションの実行とテスト

選択モードと操作

📄 参照： references/listbox-selection-modes.md

単一項目の選択
SHIFT/CTRL キーを使用した複数項目の選択
チェックボックス選択モード
すべて選択する機能
変更イベントの処理
選択した項目をプログラムから取得

データバインディングとフィールドマッピング

📄 参照： references/listbox-data-binding.md

文字列配列のバインディング
オブジェクト配列のバインディング
複雑なネストオブジェクトのバインディング
DataManager と Query を使用したリモートデータ
フィールドマッピング（text、value、groupBy、iconCss）
データバインディングの問題のトラブルシューティング

ドラッグ＆ドロップ機能

📄 参照： references/listbox-drag-and-drop-features.md

単一 ListBox でのドラッグ＆ドロップによる並べ替え
2 つの ListBox 間でのドラッグ＆ドロップによる転送
ドラッグ＆ドロップイベント（dragStart、drag、drop）
複数のリストに対するスコープ設定
イベント処理と項目の操作
実際の利用場面における 2 つの ListBox のパターン

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

📄 参照： references/listbox-customization.md

アイコンと iconCss フィールドのマッピング
カスタム項目テンプレート
カテゴリ別の項目グループ化
項目の並べ替え（昇順／降順）
CSS によるスタイル設定とテーマ
Theme Studio との連携
レスポンシブデザイン

実践的な実装例

📄 参照： references/listbox-practical-examples.md

ListBox 項目のフィルタリング
選択項目を使用したフォーム送信
条件に応じた項目の有効化／無効化
大規模データセット用のスクローラー
実際の利用例
よくあるトラブルシューティングのシナリオ

ハウツーガイドと一般的なタスク

📄 参照： references/listbox-how-to-guides.md

項目をプログラムで追加する
項目をプログラムで選択する
項目を動的に有効化または無効化する
大規模データセット用のスクローラーを有効にする
入力欄で ListBox のデータをフィルタリングする
選択項目をフォームで送信する

API リファレンス

📄 参照： references/listbox-api.md

すべてのコンポーネントプロパティと型、デフォルト値、例
すべてのパブリックメソッドとパラメーターシグネチャ、使用例
すべてのイベントとイベント引数インターフェイス、ハンドラーパターン
インターフェイス定義：FieldSettingsModel、SelectionSettingsModel、ToolbarSettingsModel
イベント引数インターフェイス：ListBoxChangeEventArgs、DragEventArgs、DropEventArgs、BeforeItemRenderEventArgs、FilteringEventArgs、SourceDestinationModel
列挙型の定義：SelectionMode、SortOrder、FilterType、ToolBarPosition、CheckBoxPosition

クイックスタートの例

ローカルデータを使用した基本的な ListBox

import { Component, OnInit } from '@angular/core';
import { ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  imports: [ListBoxModule],
  standalone: true,
  selector: 'app-listbox',
  template: `
    <ejs-listbox 
      [dataSource]="items"
      [selectionSettings]="{ mode: 'Multiple' }">
    </ejs-listbox>
  `
})
export class ListBoxComponent implements OnInit {
  public items: { [key: string]: Object }[] = [];

  ngOnInit(): void {
    this.items = [
      { text: 'Option 1', id: '1' },
      { text: 'Option 2', id: '2' },
      { text: 'Option 3', id: '3' }
    ];
  }
}

スタイル付き

⚠️ セキュリティに関する注意： これらのインポートはビルド時に node_modules から解決されます。ビルドする前に、インストール済みの Syncfusion パッケージが package-lock.json または yarn.lock に固定されたバージョンと一致していることを確認してください。サブリソース完全性（SRI）ハッシュを使用せずに、これらのファイルを CDN から取得しないでください。

/* In your global styles.css */
@import '@syncfusion/ej2-base/styles/material3.css';
@import '@syncfusion/ej2-dropdowns/styles/material3.css';
@import '@syncfusion/ej2-inputs/styles/material3.css';
@import '@syncfusion/ej2-lists/styles/material3.css';

一般的なパターン

Change イベントを使用した選択

import { ListBoxChangeEventArgs } from '@syncfusion/ej2-dropdowns';

selectedValues: string[] = [];

onSelectionChange(args: ListBoxChangeEventArgs): void {
  this.selectedValues = args.value as string[];
}

テンプレート：

<ejs-listbox
  [dataSource]="items"
  (change)="onSelectionChange($event)">
</ejs-listbox>

転送用の 2 つの ListBox

sourceItems = [
  { text: 'Available Item 1', id: '1' },
  { text: 'Available Item 2', id: '2' }
];

selectedItems = [];

テンプレート：

<div style="display: flex; gap: 20px;">
  <div>
    <h4>Available Items</h4>
    <ejs-listbox
      [dataSource]="sourceItems"
      allowDragAndDrop="true"
      scope="transfer-list">
    </ejs-listbox>
  </div>
  
  <div>
    <h4>Selected Items</h4>
    <ejs-listbox
      [dataSource]="selectedItems"
      allowDragAndDrop="true"
      scope="transfer-list">
    </ejs-listbox>
  </div>
</div>

フィルタリングされた ListBox

allItems = [
  { text: 'Apple', category: 'Fruit' },
  { text: 'Carrot', category: 'Vegetable' },
  { text: 'Banana', category: 'Fruit' }
];

get filteredItems() {
  return this.allItems.filter(item => 
    item.text.toLowerCase().includes(this.searchTerm.toLowerCase())
  );
}

主なプロパティ

選択の設定

selectionSettings：{ mode: 'Single' | 'Multiple', showCheckbox: boolean, showSelectAll: boolean, checkboxPosition: 'Left' | 'Right' } > 注意： showCheckbox: true を使用する場合は、CheckBoxSelection を注入する必要があります：

import { ListBoxComponent, CheckBoxSelection, ListBoxModule } from '@syncfusion/ej2-angular-dropdowns';
ListBoxComponent.Inject(CheckBoxSelection);
@Component({ imports: [ListBoxModule] })
```- **`maximumSelectionLength`**：選択可能な項目数を制限します

value：選択された値を取得または設定します（string[] | number[] | boolean[]）

データと表示

dataSource：項目を含む配列または DataManager
fields：{ text, value, groupBy, iconCss, disabled, htmlAttributes }
itemTemplate：各リスト項目を表示するテンプレート
noRecordsTemplate：一致する項目がない場合に表示するテンプレート

インタラクション

allowDragAndDrop：ドラッグ＆ドロップによる並べ替え／移動を有効にします
scope：ドラッグ＆ドロップで項目を移動できる、関連する ListBox を識別します
allowFiltering：組み込みのフィルター検索バーを表示します
filterBarPlaceholder：フィルターバーのプレースホルダーテキスト
filterType：'StartsWith' | 'EndsWith' | 'Contains'
toolbarSettings：2つの ListBox 間で項目を移動するためのツールバーボタンを設定します

外観

height：ListBox の高さ
sortOrder：'None' | 'Ascending' | 'Descending'
enabled：コンポーネントを有効／無効にします
enableRtl：右から左への表示
cssClass：追加の CSS クラス

次のステップ

使い始める：references/listbox-getting-started.mdでセットアップ手順を確認します
選択モードを選ぶ：ユースケースに合わせてreferences/listbox-selection-modes.mdを確認します
データをバインドする：データソースの選択肢についてはreferences/listbox-data-binding.mdを参照してください
インタラクションを追加する：高度な機能についてはreferences/listbox-drag-and-drop-features.mdを確認します
カスタマイズする：スタイル設定についてはreferences/listbox-customization.mdを確認します
例を確認する：実際の実装例についてはreferences/listbox-practical-examples.mdを参照してください
API リファレンス：すべてのプロパティ、メソッド、イベント、インターフェース定義についてはreferences/listbox-api.mdを参照してください

一般的なユースケース

選択フォーム：複数選択ドロップダウンの代替
移動リスト：リスト間で項目を移動します（2つの ListBox）
カテゴリー：グループ単位で項目を整理します
フィルタリング：大規模なデータセットを絞り込みます
データ表示：構造化されたリストデータを表示します
アクセシビリティ：準拠した選択インターフェース

Mention

ターゲット要素内で文字を入力すると（デフォルトは @）、オートコンプリート候補のポップアップを表示します。ユーザーのタグ付け、トリガー文字のカスタマイズ、リッチテキストとの連携、リモートデータ、テンプレート、包括的なアクセシビリティに対応しています。

コンポーネントの概要とアーキテクチャ

Mention コンポーネントは、ターゲット要素（div[contenteditable]、textarea、または同様の要素）内でトリガー文字（デフォルトは @）を入力すると、オートコンプリート候補のポップアップを表示します。次の用途向けに設計されています。

ユーザーのタグ付け — @ を使ってユーザー、チーム、リソースをタグ付けします
ハッシュタグ候補 — 任意の文字（#、/ など）をトリガーとして使用します
リッチテキストとの連携 — contenteditable の div やエディターで動作します
データバインディング — ローカル配列（文字列、オブジェクト、複合オブジェクト）とリモートの DataManager ソースに対応しています
フィルタリング — Contains、StartsWith、EndsWith に対応し、最小文字数、デバウンス、スペースを設定できます
テンプレートのカスタマイズ — 項目、表示、レコードなし、スピナー、グループの各テンプレートに対応しています
無効な項目 — 個々のリスト項目を選択不可に設定できます
アクセシビリティ — キーボード操作と ARIA 属性に対応し、WCAG 2.2 に準拠しています

主な特性

項目	詳細
トリガー	`mentionChar` で任意の1文字を指定できます（デフォルトは `@`）
ターゲット	`target` で設定する任意の `HTMLElement` または CSS セレクター文字列
データソース	ローカル配列（文字列、オブジェクト）、リモートの `DataManager`（OData、Web API）
フィルタリング	組み込み：`Contains`、`StartsWith`、`EndsWith`。`minLength`、`allowSpaces` を設定できます
表示	選択したテキストとともにトリガー文字を表示するかどうかを `showMentionChar` で制御します
接尾辞	`suffixText` は選択項目の後にスペースまたは改行を追加します
アクセシビリティ	WCAG 2.2、Section 508、ADA に対応。キーボードショートカット：矢印キー、Enter、Tab、Escape
ローカライズ	`noRecordsTemplate` のロケールキーに `L10n.load()` を使用します

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

📄 はじめに

参照： references/mention-getting-started.md

@syncfusion/ej2-angular-dropdowns パッケージをインストールします
スタンドアロンコンポーネントを使用して Angular 21+ プロジェクトをセットアップします
MentionModule と必要な CSS テーマをインポートします
対象となる contenteditable div を作成します
target と基本的な dataSource をバインドします
showMentionChar と mentionChar でメンション文字を表示・カスタマイズします

📄 データバインディング

参照： references/mention-data-binding.md

文字列、JSON オブジェクト、複合オブジェクトのローカル配列にバインドします
fields プロパティを使って text、value、groupBy、iconCss をマッピングします
リモートデータバインディング（制限あり — セキュリティレビューが必要です。セキュリティと信頼境界を参照）
query プロパティを使ってリモートリクエストの範囲を指定します

📄 フィルタリング

参照： references/mention-filtering.md

filterType（Contains、StartsWith、EndsWith）でフィルター方法を制御します
minLength でフィルターを開始するまでの最小入力文字数を設定します
allowSpaces でメンション検索の途中にスペースを使用できるようにします
suggestionCount で表示する候補数を制限します
debounceDelay でリモートデータソースのデバウンス遅延を調整します

📄 テンプレート

参照： references/mention-templates.md

itemTemplate で候補リスト項目のレイアウトをカスタマイズします
displayTemplate で挿入されるテキストの表示形式をカスタマイズします
noRecordsTemplate で結果がない場合の表示を処理します
リモートデータの取得中に spinnerTemplate で読み込みインジケーターを表示します
groupTemplate でグループ化された項目をカスタマイズします

📄 カスタマイズ

参照： references/mention-customization.md

showMentionChar で、選択したテキストとともにトリガー文字を表示・非表示にします
suffixText で選択後に接尾辞（スペース、改行）を追加します
popupHeight と popupWidth でポップアップのサイズを変更します
mentionChar でトリガー文字を変更します
requireLeadingSpace で先頭にスペースが必要かどうかを制御します
cssClass でカスタム CSS クラスを適用します
highlight で検索文字をハイライト表示します
ignoreCase と ignoreAccent で検索動作を設定します

📄 並べ替えと無効化された項目

参照： references/mention-sorting-and-disabled-items.md

sortOrder（None、Ascending、Descending）で候補を並べ替えます
fields.disabled で項目を選択不可にします
disableItem メソッドを使って実行時に項目を動的に無効化します

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

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

WCAG 2.2、Section 508、ADA に準拠しています
キーボードショートカットに完全対応しています（下矢印／上矢印、Enter、Tab、Escape）
ARIA 属性：aria-selected、aria-activedescendent、aria-owns
L10n.load() で noRecordsTemplate をローカライズします
enableRtl で RTL に対応します

📄 API リファレンス

参照： references/mention-api.md

型、デフォルト値、説明を含むすべてのプロパティのリファレンス
すべてのメソッド：addItem、disableItem、getDataByValue、getItems、hidePopup、showPopup、search、destroy
すべてのイベント：dataBound、actionFailureTemplate

クイックスタートの例

// app.component.ts (Angular 21 Standalone)
import { Component } from '@angular/core';
import { MentionModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MentionModule],
  template: `
    <label style="font-size: 15px; font-weight: 600;">Comments</label>
    <div id="mentionElement"
         placeholder="Type @ and tag a user"
         style="min-height: 100px; border: 1px solid #D7D7D7; border-radius: 4px; padding: 8px;">
    </div>
    <ejs-mention [dataSource]="userData" [target]="mentionTarget"></ejs-mention>
  `
})
export class AppComponent {
  public userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
  public mentionTarget: string = '#mentionElement';
}

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

⚠️ セキュリティに関する注意： 意図しないアップグレードによって、侵害された可能性のあるリリースがインストールされないよう、パッケージのバージョンを指定してください。インストール後、インストールされたバージョンがロックファイル（package-lock.json / yarn.lock）と一致することを確認してください。

ng add @syncfusion/ej2-angular-dropdowns@<version>

CSS を追加します（styles.css）：

⚠️ セキュリティに関する注意： これらのインポートはビルド時に node_modules から解決されます。ビルドする前に、インストールされた Syncfusion パッケージのバージョンが、package-lock.json または yarn.lock で指定したバージョンと一致していることを確認してください。Subresource Integrity（SRI）ハッシュを使用せずに、これらのファイルを CDN から取得しないでください。

@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-lists/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-angular-dropdowns/styles/material3.css';

よく使われるパターン

パターン 1：フィールドマッピングを使用したオブジェクトデータ

public userData: { [key: string]: Object }[] = [
  { Name: 'Selma Rose', EmailId: '[email protected]' },
  { Name: 'Maria', EmailId: '[email protected]' },
  { Name: 'Robert', EmailId: '[email protected]' }
];
public fields: Object = { text: 'Name' };
public mentionTarget: string = '#mentionElement';

<ejs-mention [dataSource]="userData" [fields]="fields" [target]="mentionTarget"></ejs-mention>

パターン 2：showMentionChar を使用したカスタムトリガー文字

<ejs-mention
  [dataSource]="userData"
  [target]="mentionTarget"
  [mentionChar]="'#'"
  [showMentionChar]="true">
</ejs-mention>

パターン 3：ポップアップ幅を指定したリモートデータ

🔒 セキュリティポリシー — リモートデータは制限対象のパターンです。 Mention をリモートエンドポイントにバインドする場合は、本番環境で使用する前にセキュリティレビューが必要です（セキュリティと信頼境界を参照）。リモートデータのバインドの詳細と要件は、references/mention-data-binding.mdに記載されています。 ここでは、リモート DataManager の例はデフォルトで提供していません。

パターン 4：メンション検索でスペースを許可する

<ejs-mention
  [dataSource]="userData"
  [fields]="fields"
  [allowSpaces]="true"
  [target]="mentionTarget">
</ejs-mention>

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

プロパティ	型	デフォルト	用途
`target`	HTMLElement \| string	—	メンション候補を表示する対象要素
`dataSource`	Array \| DataManager	`[]`	候補のソースデータ
`fields`	FieldSettingsModel	`{ text: null, value: null }`	データ列をコンポーネントにマッピングします
`mentionChar`	string	`'@'`	候補ポップアップを表示するトリガー文字
`showMentionChar`	boolean	`false`	挿入したテキストにトリガー文字を表示します
`suffixText`	string	`null`	選択した項目の後に追加するテキスト
`filterType`	FilterType	`'Contains'`	候補の照合方法
`minLength`	number	`0`	フィルタリングを開始する最小文字数
`allowSpaces`	boolean	`false`	メンションの途中の検索でスペースを許可します
`suggestionCount`	number	`25`	表示する候補の最大数
`debounceDelay`	number	`300`	フィルタリングが実行されるまでの遅延（ミリ秒）
`sortOrder`	SortOrder	`'None'`	候補の並べ替え順
`popupHeight`	string \| number	`'300px'`	ポップアップリストの高さ
`popupWidth`	string \| number	`'auto'`	ポップアップリストの幅
`highlight`	boolean	`false`	一致した文字をハイライトします
`ignoreCase`	boolean	`true`	大文字と小文字を区別せずに検索します
`ignoreAccent`	boolean	—	検索時に発音区別符号を無視します
`requireLeadingSpace`	boolean	`true`	トリガー文字の前にスペースを必須にします
`cssClass`	string	`null`	コンポーネントに適用するカスタム CSS クラス
`locale`	string	`'en-US'`	ローカライズのカルチャ
`enableRtl`	boolean	`false`	右から左への表示
`enablePersistence`	boolean	`false`	再読み込み後も状態を保持します
`zIndex`	number	`1000`	ポップアップの z-index

ワークフローの判断ツリー

Need to implement Mention / @mention tagging?
│
├─ What's your data source?
│   ├─ Local strings/array  → See Data Binding: "Array of simple data"
│   ├─ Local objects        → See Data Binding: "Array of JSON data" + fields mapping
│   └─ Remote API           → See Data Binding: "Binding remote data"
│
├─ Custom trigger character (not @)?
│   └─ YES → [mentionChar]="'#'" (or any single char)
│
├─ Show trigger char in inserted text?
│   └─ YES → [showMentionChar]="true"
│
├─ Multi-word names (e.g., "John Doe")?
│   └─ YES → [allowSpaces]="true"
│
├─ Custom item layout in popup?
│   └─ YES → See Templates: itemTemplate / displayTemplate
│
├─ Need sorted suggestions?
│   └─ YES → See Sorting & Disabled Items: sortOrder
│
├─ Some items should not be selectable?
│   └─ YES → See Sorting & Disabled Items: fields.disabled / disableItem
│
├─ Filtering behavior?
│   ├─ By default (Contains)  → No extra config
│   ├─ StartsWith / EndsWith  → filterType="StartsWith"
│   └─ Minimum typed chars    → [minLength]="3"
│
└─ Need accessibility or localization?
    └─ YES → See Accessibility & Localization reference

MultiSelect

複数の値を選択できるドロップダウン（ejs-multiselect）です。4 つの表示モード（Default／Box／Delimiter／CheckBox）に対応し、高度なフィルタリング、テンプレート、グループ化、リモートデータ、仮想化、Angular フォームとの完全な統合を備えています。

コンポーネントの概要

モード	動作	使用する場面
`Default`	選択した項目を入力欄にチップとして表示します	標準的な複数選択
`Box`	Default と同様ですが、ボックス表示が明示されます	視認性が必要な場合
`Delimiter`	選択した項目をカンマ区切りのテキストとして表示します	スペースに制約のあるレイアウト
`CheckBox`	ポップアップに各項目のチェックボックスを表示します	一括選択を行うワークフロー

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

はじめに

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

インストールとパッケージのセットアップ（ng add）
CSS のインポートとテーマの設定
スタンドアロン Angular コンポーネントでの基本的な <ejs-multiselect>
ポップアップの高さと幅の設定
Angular のバージョンに関する注意事項（Angular 19 以降ではスタンドアロンがデフォルト）

データバインディングと値のバインディング

📄 参照： references/multiselect-data-binding.md

ローカル配列（文字列、数値、オブジェクト）
fields マッピング：text、value、groupBy、iconCss、disabled
DataManager を使用したリモートデータ（OData、Web API）
プログラムによる値の事前選択
allowObjectBinding によるオブジェクトバインディング

選択モード、チップ、項目の制御

📄 参照： references/multiselect-selection-modes.md

mode プロパティ：Default／Box／Delimiter／CheckBox
CheckBox モード：CheckBoxSelection、showSelectAll、maximumSelectionLength
tagging イベントによるチップのカスタマイズ
allowCustomValue によるカスタム値
特定の項目を無効化：fields.disabled、disableItem()
addTagOnBlur と changeOnBlur の動作

フィルタリング

📄 参照： references/multiselect-filtering.md

allowFiltering の有効化、filtering イベント、updateData()
filterType：startsWith、contains、endsWith
クエリを実行するまでに必要な最小文字数
DataManager によるリモートフィルタリング
大文字と小文字を区別しない照合

テンプレート

📄 参照： references/multiselect-templates.md

itemTemplate — ng-template によるリスト項目のカスタム表示
valueTemplate — チップ／選択値の表示をカスタマイズ
groupTemplate — グループヘッダーの内容をカスタマイズ
headerTemplate／footerTemplate — ポップアップの上部／下部
noRecordsTemplate／actionFailureTemplate

グループ化と連動選択

📄 参照： references/multiselect-grouping-and-items.md

fields.groupBy — 項目をカテゴリごとに整理
固定グループヘッダーとインラインのグループヘッダー
グループ単位の「すべて選択」に使う enableGroupCheckBox
連動する MultiSelect：親の change イベント → 子のデータをフィルタリング
国 → 州 → 市の連動パターン

フォームとの統合

📄 参照： references/multiselect-form-support.md

テンプレート駆動フォーム：FormsModule、ngModel、双方向バインディング
リアクティブフォーム：ReactiveFormsModule、FormGroup、FormControl
formControlName の使用と検証
必須フィールドとカスタムバリデーターのパターン

高度な機能

📄 参照： references/multiselect-advanced-features.md

大規模データセット向けの仮想化（enableVirtualization）
ポップアップのサイズ変更（allowResize、サイズ変更イベント）
リスト項目のアイコン（iconCss フィールド）
ローカライズ（L10n.load()、ロケールキーの上書き）
アクセシビリティ：WAI-ARIA、キーボード操作、WCAG 2.2
RTL サポート

API リファレンス

📄 参照： references/multiselect-api.md

すべてのプロパティの型とデフォルト値を含む完全な一覧
すべてのパブリックメソッドのシグネチャ、パラメーター、戻り値の型
すべてのイベントの引数の型と使用例
モジュールのインジェクションに関する注意事項（CheckBoxSelectionService）

クイックスタート

⚠️ セキュリティに関する注意： 意図しないアップグレードによって、侵害されている可能性のあるリリースがインストールされるのを防ぐため、パッケージのバージョンを固定してください。インストール後に、インストールされたバージョンがロックファイル（package-lock.json／yarn.lock）と一致することを確認してください。

ng add @syncfusion/ej2-angular-dropdowns@<version>

// app.component.ts — Standalone Angular 19+
import { Component } from '@angular/core';
import { MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  selector: 'app-root',
  template: `
    <ejs-multiselect
      [dataSource]="skills"
      [fields]="fields"
      placeholder="Select skills"
      [(value)]="selectedSkills"
      (change)="onChange($event)">
    </ejs-multiselect>
  `
})
export class AppComponent {
  public skills = [
    { id: 1, name: 'Angular' },
    { id: 2, name: 'React' },
    { id: 3, name: 'TypeScript' },
    { id: 4, name: 'Node.js' },
  ];
  public fields = { text: 'name', value: 'id' };
  public selectedSkills: number[] = [1, 3]; // pre-select Angular & TypeScript

  onChange(args: any): void {
    this.selectedSkills = args.value;
  }
}

⚠️ セキュリティに関する注意： これらのインポートはビルド時に node_modules から解決されます。ビルド前に、インストールされている Syncfusion パッケージが package-lock.json または yarn.lock で固定したバージョンと一致することを確認してください。サブリソース整合性（SRI）ハッシュを使用せずに、これらのファイルを CDN から取得しないでください。

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

よく使われるパターン

すべて選択付きチェックボックスモード

import { MultiSelectModule, CheckBoxSelectionService } from '@syncfusion/ej2-angular-dropdowns';

@Component({
  standalone: true,
  imports: [MultiSelectModule],
  providers: [CheckBoxSelectionService],
  template: `
    <ejs-multiselect
      [dataSource]="items"
      mode="CheckBox"
      [showSelectAll]="true"
      selectAllText="Select All"
      unSelectAllText="Unselect All"
      [maximumSelectionLength]="5">
    </ejs-multiselect>
  `
})

リモートデータによるフィルタリング

🔒 セキュリティポリシー — リモートデータは制限対象のパターンです。 MultiSelect をリモートエンドポイントにバインドする場合、本番環境で使用する前にセキュリティレビューが必要です（セキュリティと信頼境界を参照）。リモートフィルタリングの詳細と要件については、 references/multiselect-filtering.mdに記載されています。 デフォルトではリモートのDataManagerの例は提供されていません。

リアクティブフォームとの連携

import { ReactiveFormsModule, FormControl } from '@angular/forms';

// In component:
public skillsControl = new FormControl([1, 3]); // pre-selected IDs

// In template:
// <ejs-multiselect [formControl]="skillsControl" [dataSource]="skills" [fields]="fields">
// </ejs-multiselect>

主なプロパティ

プロパティ	型	用途
`dataSource`	`any[] \| DataManager`	表示する項目
`fields`	`FieldSettingsModel`	`text`、`value`、`groupBy`、`disabled`、`iconCss`をマッピングします
`value`	`any[]`	現在選択されている値（双方向バインディングには`[(value)]`を使用します）
`mode`	`string`	`Default`、`Box`、`Delimiter`、`CheckBox`
`allowFiltering`	`boolean`	ドロップダウン内の検索を有効にします
`filterType`	`string`	`startsWith`、`contains`、`endsWith`
`showSelectAll`	`boolean`	CheckBoxモードで「すべて選択」を表示します
`maximumSelectionLength`	`number`	選択可能な項目数の上限を設定します
`allowCustomValue`	`boolean`	リストにない値をユーザーが追加できるようにします
`enableVirtualization`	`boolean`	大規模なリストのレンダリングを最適化します
`popupHeight` / `popupWidth`	`string`	ポップアップのサイズを制限します
`allowResize`	`boolean`	ユーザーがドラッグしてポップアップのサイズを変更できるようにします
`placeholder`	`string`	入力欄のヒントテキスト

MultiColumn ComboBox

MultiColumn ComboBox（ejs-multicolumncombobox）は、複数列のグリッド形式のポップアップにデータを表示するドロップダウンコンポーネントです。列の設定、データバインディング（ローカル／リモート）、フィルタリング、並べ替え、グループ化、テンプレート、仮想化、イベント、アクセシビリティに対応しています。

ナビゲーションガイド

はじめに

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

インストールとパッケージのセットアップ（ng add @syncfusion/ej2-angular-multicolumn-combobox@<version>）

⚠️ セキュリティに関する注意： 不正なリリースへの意図しないアップグレードを防ぐため、パッケージのバージョンを特定の値に固定してください。インストール後、インストールされたバージョンがロックファイル（package-lock.json / yarn.lock）と一致することを確認してください。
Material その他のテーマ向けの CSS／テーマのインポート
<ejs-multicolumncombobox>を使用した基本的なスタンドアロンコンポーネントの使い方
dataSourceおよびfieldsプロパティのバインディング
子要素の<e-columns>および<e-column>の設定
ポップアップの高さと幅の設定（popupHeight、popupWidth）

列の設定

📄 参照先： references/columns.md

field、header、widthを指定した列の定義
textAlignによるテキスト配置の設定
ng-templateを使用した列のtemplateの利用
displayAsCheckBoxによるブール値のチェックボックス表示
customAttributesによるカスタム CSS 属性の適用
headerTemplateによるカスタム列ヘッダー
formatによる値の書式設定

データバインディング

📄 参照先： references/data-binding.md

dataSourceを使用したローカルのオブジェクト配列のバインディング
リモートデータバインディング（制限対象 — セキュリティレビューが必要です。セキュリティと信頼境界を参照）
fieldsのマッピング：text、value、groupBy
queryプロパティを使用したリモート結果のフィルタリング／制限

項目と表示の設定

📄 参照： references/items.md

text プロパティで事前選択テキストを設定する
value プロパティで事前選択値を設定する
index プロパティでインデックスを指定して選択項目を設定する
placeholder でプレースホルダーテキストを設定する
floatLabelType（Never/Always/Auto）でフロートラベルの動作を設定する
htmlAttributes で HTML 属性を追加する
width でコンポーネントの幅を設定する
ポップアップのサイズ（popupWidth、popupHeight）を設定する
showClearButton でクリアボタンの表示／非表示を切り替える
cssClass でカスタム CSS クラスを適用する
disabled で無効状態を設定する
readonly で読み取り専用モードを設定する
グリッド設定（gridSettings：gridLines、rowHeight、enableAltRow）を設定する

フィルタリング

📄 参照： references/filtering.md

allowFiltering でフィルタリングの有効／無効を切り替える
filterType（StartsWith/EndsWith/Contains）でフィルターの種類を変更する

並べ替え

📄 参照： references/sorting.md

allowSorting で並べ替えの有効／無効を切り替える
sortOrder（None/Ascending/Descending）で初期の並べ替え順序を設定する
sortType で単一列と複数列のどちらを並べ替えるかを設定する

グループ化

📄 参照： references/grouping.md

fields プロパティの groupBy フィールドを使用して項目をグループ化する

テンプレート

📄 参照： references/templates.md

itemTemplate で行項目をカスタマイズする
headerTemplate で列ヘッダーをカスタマイズする
groupTemplate でグループヘッダーを設定する
footerTemplate でフッターの内容を設定する
noRecordsTemplate でレコードがない場合のプレースホルダーを設定する
actionFailureTemplate でリモート処理の失敗表示を設定する

イベント

📄 参照： references/events.md

actionBegin、actionComplete、actionFailure — データのライフサイクルイベント
select — 項目選択イベント
change — 値変更イベント
filtering — テキスト入力によるフィルタリングイベント
open / close — ポップアップの状態イベント
created — コンポーネントのレンダリング完了イベント

仮想化

📄 参照： references/virtualization.md

enableVirtualization で仮想スクロールを有効にする
ローカルおよびリモートの大規模データセットで仮想スクロールを使用する

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

📄 参照： references/accessibility.md

WCAG 2.2、Section 508 への準拠
コンポーネントが使用する WAI-ARIA 属性
キーボードナビゲーションのショートカット
enableRtl による RTL サポート
L10n を使用した noRecordsTemplate テキストのローカライズ

API リファレンス

📄 参照： references/api.md

プロパティ、メソッド、イベントの全一覧
ColumnModel インターフェイスのプロパティ
GridSettingsModel インターフェイス
メソッド：showPopup、hidePopup、focusIn、focusOut、getDataByValue、getItems、addItems

クイックスタート

import { Component } from '@angular/core';
import { MultiColumnComboBoxModule } from '@syncfusion/ej2-angular-multicolumn-combobox';

@Component({
  imports: [MultiColumnComboBoxModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-multicolumncombobox
      id='multicolumn'
      [dataSource]='empData'
      [fields]='fields'
      [placeholder]='waterMark'>
      <e-columns>
        <e-column field='EmpID' header='Employee ID' width='100'></e-column>
        <e-column field='Name' header='Name' width='90'></e-column>
        <e-column field='Designation' header='Designation' width='100'></e-column>
        <e-column field='Country' header='Country' width='90'></e-column>
      </e-columns>
    </ejs-multicolumncombobox>`
})
export class AppComponent {
  public empData: Object[] = [
    { EmpID: 1001, Name: 'Andrew Fuller', Designation: 'Team Lead', Country: 'England' },
    { EmpID: 1002, Name: 'Robert', Designation: 'Developer', Country: 'USA' },
    { EmpID: 1003, Name: 'Michael', Designation: 'HR', Country: 'Russia' }
  ];
  public fields: Object = { text: 'Name', value: 'EmpID' };
  public waterMark: string = 'Select an employee';
}

よく使われるパターン

DataManager を使用したリモートデータ

データが API から取得される場合は、DataManager を使用します → references/data-binding.md を参照してください

大規模データセット（150 行以上）

パフォーマンスの問題を避けるには、enableVirtualization を有効にします → references/virtualization.md を参照してください

詳細な行表示

画像、バッジ、カスタム HTML には、ng-template を使用した列の template を使います → references/columns.md を参照してください

グループ化されたドロップダウン

fields に groupBy を設定して項目を分類します → references/grouping.md を参照してください

プログラムによる開閉

showPopup() / hidePopup() メソッドを使用します → references/api.md を参照してください

Markdown 対応

ログインしてコメント

基本情報

作者: syncfusion
リポジトリ: syncfusion/angular-ui-components-skills
カテゴリ: デザイン・UI
インストール数: 283
GitHub スター: 0

問題を報告