igniteui-angular-components

Ignite UI for Angular — UI コンポーネント

前提条件

• インストール済みの igniteui-angular パッケージと同じメジャーバージョンの Angular プロジェクト（igniteui-angular のメジャーバージョンは Angular のメジャーバージョンに対応しています）
• @angular/cli がインストールされていること
• ng add igniteui-angular（または @infragistics 版）または npm install で、プロジェクトに igniteui-angular または @infragistics/igniteui-angular が追加されていること — 下記のパッケージのバリエーションを参照してください。
• アプリケーションにテーマが適用されていること（igniteui-angular-themingを参照してください）。
• app.config.ts に provideAnimations() があること — オーバーレイまたはアニメーション付きコンポーネントを使用する前に必須です

Ignite UI CLI MCP サーバー（必須）

igniteui-cli MCP サーバーは、Ignite UI API の正確なバージョン情報を提供します。list_components、get_doc、search_docs、search_api、get_api_reference を利用できます。完全なコンポーネントのドキュメントで扱われるのは、一部のコンポーネントです（カタログはリリースごとに拡充されます。利用可能なものを確認するには、一度 list_components を呼び出してください。例：Combo、Simple Combo、Chat、Tooltip、グリッドのツールバー／エクスポートのドキュメント）。get_doc のドキュメントがある場合は、下記のリファレンスファイルよりもそちらを優先してください。search_api／get_api_reference では、すべてのコンポーネントの API メンバー（入力、出力、メソッド）を確認できます。メンバー単位の参照には、必ずこれらを使用してください。それ以外については、下記のリファレンスファイルを主なガイダンスとして使用してください。

ほかの手順を進める前に、framework: "angular" を指定して list_components を呼び出し、サーバーが利用可能か確認してください。ツールを利用できない場合：

1. 提案するだけでなく、自分で設定してください。 プロジェクトのルートから npx -y igniteui-cli ai-config を実行してください（igniteui-cli がグローバルにインストールされている場合は ig ai-config）。これにより、既存のサーバーエントリを保持したまま、igniteui-cli と igniteui-theming の両方の MCP サーバーが設定され、Agent Skills がコピーされます。クライアントが対象外の場合は、references/mcp-setup.md を参照してエントリを手動で追加してください — サーバーコマンドは npx -y igniteui-cli mcp（または ig mcp）です。
2. エディターまたはエージェントのセッションを再読み込みするようユーザーに依頼し、その後停止してください。 実行中のセッションには MCP ツールを読み込めません。
3. ユーザーが明示的に依頼した場合に限り、サーバーなしで続行してください。 その場合はリファレンスファイルを使用し、MCP サーバーで確認できなかったすべてのセレクター、インポートパス、メンバー名を未確認として明記してください。

必須のワークフロー

このファイルは振り分けのハブにすぎません。コード例も API の詳細も含まれていません。 コンポーネントの API はリリース間で変更されるため、コンポーネントのセレクター、インポートパス、入力／出力名、ディレクティブ名を記憶に頼って記述してはいけません。まず該当するリファレンスファイルを読んでください。

1. 関係するコンポーネントまたは機能をすべて特定します。 ユーザーの依頼を、下記の「タスク → リファレンスファイル」表の1つ以上の行に対応付けます。1つの依頼が複数のカテゴリにまたがることはよくあります（例：Dialog 内のフォームには form-controls.md と feedback.md の両方が必要です）。
2. 特定したリファレンスファイルをすべて、1回の並列ファイル読み取りで、全文読みます — 答えをすでに知っていると思っていても省略してはいけません。
3. その後、読んだ内容だけに基づいて出力します。 リファレンスファイルに記載がない場合は、get_doc／search_docs／search_api で調べてください。推測してはいけません — MCP サーバーで確認できない場合は、その詳細が未確認であることを明示してください。

タスク → 参照ファイル

タスク	読む参照ファイル
アプリのセットアップ、app.config.ts のプロバイダー、provideAnimations()、エントリーポイントのインポート、便利なディレクティブ配列	references/setup.md
Input Group、Combo、Simple Combo、Select、Date Picker、Date Range Picker、Time Picker、Calendar、Checkbox、Radio、Switch、Slider、Autocomplete、リアクティブフォーム／テンプレート駆動フォーム	references/form-controls.md
Tabs、Bottom Navigation、Stepper、Accordion、Expansion Panel、Splitter、Navigation Drawer	references/layout.md
List、Tree、Card、Chips、Avatar、Badge、Icon、Carousel、Paginator、Progress Indicators、Chat	references/data-display.md
Dialog、Snackbar、Toast、Banner	references/feedback.md
Button、Icon Button、Button Group、Ripple、Tooltip、Drag and Drop	references/directives.md
Layout Manager（igxLayout、igxFlex ディレクティブ）、Dock Manager（igc-dockmanager ウェブコンポーネント）、Tile Manager（igc-tile-manager ウェブコンポーネント）	references/layout-manager.md
Charts（Area、Bar、Column、Stock／Financial、Pie）、チャートの設定、チャート機能（アニメーション、ツールチップ、マーカー、ハイライト、ズーム）、データバインディング	references/charts.md

迷ったときは、参照ファイルを少なく読むより、多めに読んでください。 不要なファイルを読むコストはごくわずかですが、API の使い方を誤って想定すると、アプリケーションが動かなくなります。

---

パッケージの種類

パッケージ	インストール	利用者
igniteui-angular	npm install igniteui-angular	オープンソース／コミュニティ
@infragistics/igniteui-angular	プライベートな @infragistics レジストリが必要	ライセンス版／エンタープライズユーザー

両方のパッケージでエントリーポイントのパスは同一です。package.json を確認し、すべてのインポートのプレフィックスには該当するパッケージ名を使用してください。どちらのパッケージも、ルートのバレルからインポートしないでください。 どちらのパッケージも、次のコマンドで @angular/cli を使ってプロジェクトに追加できます：ng add igniteui-angular または ng add @infragistics/igniteui-angular。

---

関連スキル

• igniteui-angular-grids — データグリッド（Flat Grid、Tree Grid、Hierarchical Grid、Pivot Grid、Grid Lite）
• igniteui-angular-theming — テーマ設定とスタイル設定