igniteui-angular-components

Ignite UI for Angular — UI 组件

前提条件

• Angular 项目的主版本与已安装的 igniteui-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 成员（输入、输出、方法）——查询任何成员时都要使用它们。其他内容则以以下参考文件为主要指南。

在执行任何其他步骤之前，先验证服务：调用 list_components 并传入 framework: "angular"。如果工具不可用：

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. 请用户重新加载编辑器或 Agent 会话，然后停止。 MCP 工具无法加载到正在运行的会话中。
3. 只有用户明确要求时，才可以在没有服务的情况下继续。 此时请使用参考文件，并将每个无法通过 MCP 服务验证的选择器、导入路径和成员名称标记为未经验证。

必需工作流

此文件仅用于指引，不包含代码示例或 API 详情。 组件 API 会随版本变化，因此切勿凭记忆编写组件选择器、导入路径、输入／输出名称或指令名称——请先阅读相关参考文件。

1. 识别涉及的所有组件或功能。 将用户的请求对应到下方“任务 → 参考文件”表中的一行或多行。单个请求通常涉及多个类别（例如，Dialog 中的表单同时需要 form-controls.md 和 feedback.md）。
2. 完整阅读所有已确定的参考文件，并在一次并行文件读取批次中完成——即使你认为自己已经知道答案，也必须阅读。
3. 然后生成输出，且只能依据你读到的内容。如果参考文件未涵盖某项内容，请使用 get_doc／search_docs／search_api 查询。切勿猜测——如果 MCP 服务无法给出答案，请明确说明该细节未经验证。

任务 → 参考文件

任务	要阅读的参考文件
应用设置、app.config.ts providers、provideAnimations()、入口点导入、便捷指令数组	references/setup.md
输入组、组合框、简单组合框、选择器、日期选择器、日期范围选择器、时间选择器、日历、复选框、单选框、开关、滑块、自动完成、响应式／模板驱动表单	references/form-controls.md
选项卡、底部导航、步骤条、手风琴、展开面板、分隔器、导航抽屉	references/layout.md
列表、树、卡片、标签、头像、徽章、图标、轮播图、分页器、进度指示器、聊天	references/data-display.md
对话框、Snackbar、Toast、横幅	references/feedback.md
按钮、图标按钮、按钮组、波纹、工具提示、拖放	references/directives.md
布局管理器（igxLayout、igxFlex 指令）、停靠管理器（igc-dockmanager Web 组件）、平铺管理器（igc-tile-manager Web 组件）	references/layout-manager.md
图表（面积图、条形图、柱状图、股票／金融图表、饼图）、图表配置、图表功能（动画、工具提示、标记、高亮、缩放）、数据绑定	references/charts.md

如有疑问，多读一些参考文件，不要少读。 不必要地读取文件代价微不足道；臆造 API 用法则可能导致应用损坏。

---

包变体

包	安装	使用者
igniteui-angular	npm install igniteui-angular	开源／社区用户
@infragistics/igniteui-angular	需要私有的 @infragistics 注册表	获得许可的／企业用户

两个包的入口点路径完全相同。检查 package.json，并在每个导入中使用相应的包名作为前缀。切勿从任一包的根 barrel 导入。 可以使用以下命令通过 @angular/cli 将这两个包添加到项目中：ng add igniteui-angular 或 ng add @infragistics/igniteui-angular。

---

相关技能

• igniteui-angular-grids — 数据网格（平面网格、树形网格、分层网格、透视网格、Grid Lite）
• igniteui-angular-theming — 主题与样式