From 3f04558a0a0faddd57209b9572303451494ca5b7 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Thu, 2 Apr 2026 12:25:24 +0300 Subject: [PATCH 01/21] feat: add mcp related info, update templates --- en/components/general/cli-overview.md | 6 ++++++ en/components/general/cli/component-templates.md | 12 ++++++++++++ .../general/cli/getting-started-with-cli.md | 13 +++++++++++++ .../step-by-step-guide-using-angular-schematics.md | 2 +- en/components/general/getting-started.md | 5 +++++ 5 files changed, 37 insertions(+), 1 deletion(-) diff --git a/en/components/general/cli-overview.md b/en/components/general/cli-overview.md index 9991aa295d..cbbce963cf 100644 --- a/en/components/general/cli-overview.md +++ b/en/components/general/cli-overview.md @@ -13,3 +13,9 @@ Our CLI tools provide project templates pre-configured for Ignite UI for Angular [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) are available as a collection that can be used with the [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli). They offer similar core Ignite UI CLI functionality, but one that's integrated with the Schematics workflow and focused specifically on this product. The schematics collection is added to your project when you [install Ignite UI for Angular](getting-started.md#installing-ignite-ui-for-angular). You can find more information and examples about its usage in the [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.md) topic. Both versions of the tooling allow for various projects, component and scenario views (templates) and offer [guided step-by-step mode using Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) and [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md). + +## AI Assistant Integration (MCP) + +The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants — such as GitHub Copilot, Claude, or Cursor — directly to Ignite UI component documentation and API references. Once configured, your AI assistant can look up component docs, retrieve API details, and generate accurate Ignite UI code without leaving your editor. + +For setup instructions and available tools, see ... diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 6f7828244f..0c0eb47e5f 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -17,6 +17,12 @@ The following table provides a list of the Ignite UI Angular components that can |grid-summaries |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries
Ignite UI CLI:
ig add grid-summaries newGridSummaries
IgxGrid with summaries feature.
| [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature.| |grid-multi-column-headers|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders
Ignite UI CLI:
ig add grid-multi-column-headers newGridMultiColumnHeaders
IgxGrid with multiple header columns.
|[IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md) | |tree grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid
Ignite UI CLI:
ig add custom-tree-grid newCustomTreeGrid
IgxTreeGrid with optional features like sorting, filtering, row editing, etc.
|[IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) | +|hierarchical-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGrid
Basic IgxHierarchicalGrid.
|[IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns.| +|hierarchical-grid-batch-editing|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
Ignite UI CLI:
ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditing
IgxHierarchicalGrid with batch editing.
|[IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md).| +|hierarchical-grid-custom|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid-custom newCustomHierarchicalGrid
IgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.
|[IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md).| +|hierarchical-grid-summaries|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries
Ignite UI CLI:
ig add hierarchical-grid-summaries newHierarchicalGridSummaries
IgxHierarchicalGrid with summaries feature.
|[IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature.| +|pivot-grid |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGrid
Basic IgxPivotGrid.
|[IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis.| +|tree |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tree newTree
Ignite UI CLI:
ig add tree newTree
IgxTree with selection and load-on-demand nodes.
|[IgxTree](../../tree.md) with selection and load-on-demand node support.| |list |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newList
Basic IgxList.
|[IgxList](../../list.md) with search and filtering logic. | |combo |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c combo newCombo
Ignite UI CLI:
ig add combo newCombo
Basic IgxCombo with templating.
|[IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md). | |Charts | | | @@ -26,11 +32,15 @@ The following table provides a list of the Ignite UI Angular components that can |bullet graph |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph
Ignite UI CLI:
ig add bullet-graph newBulletGraph
IgxBulletGraph with different animations.
|[IgxBulletGraph](../../bullet-graph.md) with different animations.| |linear gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge
Ignite UI CLI:
ig add linear-gauge newLinearGauge
IgxLinearGauge with different animations.
|[IgxLinearGauge](../../linear-gauge.md) with different animations.| |radial gauge |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge
Ignite UI CLI:
ig add radial-gauge newRadialGauge
IgxRadialGauge with different animations.
|[IgxRadialGauge](../../radial-gauge.md) with different animations.| +|Maps | | | +|geographic-map |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMap
Basic IgxGeographicMap.
|[IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps.| |Layouts | | | |dock-manager |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dock-manager newDockManager
Ignite UI CLI:
ig add dock-manager newDockManager
Basic IgcDockManager.
|[IgcDockManager](../../dock-manager.md) with nine content slots. | |carousel |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
|[IgxCarousel](../../carousel.md) cycling through a series of images. | |tabs |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tabs newTabs
Ignite UI CLI:
ig add tabs newTabs
Basic IgxTabs.
|[IgxTabs](../../tabs.md) component that includes three customized tab-groups. | |bottom-nav |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c bottom-nav newBottomNav
Ignite UI CLI:
ig add bottom-nav newBottomNav
Three item bottom-nav template.
|Three item bottom [navbar](../../navbar.md) template. | +|accordion |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordion
Basic IgxAccordion sample.
|[IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container.| +|stepper |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepper
Basic IgxStepper sample.
|[IgxStepper](../../stepper.md) visualizing content as a process with successive steps.| |Data Entry & Display| | | |chip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. | |dropdown |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDown
Basic IgxDropDown.
|Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | @@ -38,6 +48,8 @@ The following table provides a list of the Ignite UI Angular components that can |select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelect
Select With Groups.
|[IgxSelect](../../select.md) displaying grouped items. | |select (v4.1.0) |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelect
IgxSelect in a form.
|[IgxSelect](../../select.md) component usage in a form. | |input group |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroup
Basic IgxInputGroup form view.
|Form view created with [IgxInputGroup](../../input-group.md).| +|autocomplete |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocomplete
Simple IgxAutocomplete.
|[IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options.| +|enhanced-autocomplete|Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete
Ignite UI CLI:
ig add enhanced-autocomplete newEnhancedAutocomplete
IgxAutocomplete with enhanced groups.
|[IgxAutocomplete](../../autocomplete.md) with grouped suggestion items.| |Interactions| | | |dialog |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dialog newDialog
Ignite UI CLI:
ig add dialog newDialog
Basic IgxDialog.
| Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog. | |tooltip |Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c tooltip newTooltip
Ignite UI CLI:
ig add tooltip newTooltip
A fully customizable tooltip.
|Basic tooltip created with the [IgxTooltip](../../tooltip.md). | diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 9fc89c9f4a..e2ae6ade5d 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -181,6 +181,18 @@ The `start` command will build the application, start a web server and open it i ig start ``` +## AI Assistant Integration (MCP) + +Ignite UI CLI ships with a built-in MCP (Model Context Protocol) server. Connect it to GitHub Copilot, Claude, or Cursor and your assistant can query component docs, retrieve API details, and generate accurate Ignite UI code without switching context. + +To start the MCP server: +```cmd +ig mcp +``` + +>[!NOTE] +> For full setup instructions, supported clients (VS Code, Claude Desktop, Cursor), and available tools, see... + ## Ignite UI CLI Commands A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): @@ -196,3 +208,4 @@ A full list of the available Ignite UI CLI commands and their usage (like passin | [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | | ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | +| ig mcp | | Starts the Ignite UI MCP server for AI assistant integration, providing component documentation search and API reference tools. | diff --git a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md index 117ba1c935..bfa945b556 100644 --- a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -73,6 +73,6 @@ If you choose to add a scenario to your application you will also get a list of Scenario templates -After adding a template to your application, you will be asked weather you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. +After adding a template to your application, you will be asked whether you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. You can always add more Ignite UI for Angular views to your application at latter moment using the `ng g @igniteui/angular-schematics:c [template] [name]` command. diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index bfcfd32293..65e363e186 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -308,11 +308,16 @@ Ignite UI for Angular ships with **Agent Skills** — structured knowledge files Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic. +The **Ignite UI CLI** also includes a built-in **MCP (Model Context Protocol) server** that gives AI assistants live access to Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server lets your assistant query up-to-date docs, search APIs, and retrieve setup guides on demand. + +Learn more in the Ignite UI MCP Server topic. + ## Additional Resources
- [Ignite UI for Angular Skills](../ai/skills.md) +- Ignite UI MCP Server - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) - [Grid overview](../grid/grid.md) From 955cf26664929abc67fda8c47043cacbf3681055 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Thu, 2 Apr 2026 12:28:32 +0300 Subject: [PATCH 02/21] chore: add blank line --- en/components/general/cli/getting-started-with-cli.md | 1 + 1 file changed, 1 insertion(+) diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index e2ae6ade5d..37ce17193d 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -186,6 +186,7 @@ ig start Ignite UI CLI ships with a built-in MCP (Model Context Protocol) server. Connect it to GitHub Copilot, Claude, or Cursor and your assistant can query component docs, retrieve API details, and generate accurate Ignite UI code without switching context. To start the MCP server: + ```cmd ig mcp ``` From 1ef636b09735b128fa045326389984153384eeda Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Thu, 2 Apr 2026 13:56:11 +0300 Subject: [PATCH 03/21] chore: update getting-started to use igniteui cli --- en/components/general/getting-started.md | 80 ++++++++---------------- 1 file changed, 25 insertions(+), 55 deletions(-) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 65e363e186..93762188b3 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -37,53 +37,45 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo ## Installing Ignite UI for Angular -Ignite UI for Angular can be installed either with the Angular CLI or with the Ignite UI CLI. +Ignite UI for Angular can be installed using the Ignite UI CLI or Angular Schematics. -### Quick Start with the Angular CLI +### Quick Start with Ignite UI CLI -The Angular CLI provides support for external libraries to your project through the `ng add` command, which installs a library's `npm` packages to your workspace and configures the project in the current working directory to use that library. +The easiest way to create a new Ignite UI for Angular application from scratch is with the **Ignite UI CLI**. It scaffolds a fully configured project and walks you through an interactive setup with no manual configuration required. -To create an Angular application with the Angular CLI, open your preferred terminal and type in the following command: +Install the CLI globally: ```cmd -ng new --style=scss +npm install -g igniteui-cli ``` -You can specify the file extension or preprocessor to use for your application's style files with the `--style` option. We recommend using SCSS since our components' styles are based on the [Ignite UI for Angular theming library](../themes.md). Later on, when you install the Ignite UI for Angular package, your application will be configured to use the default styling theme which can be then easily customized either for all or for specific component instances. - -Thereafter you can install the Ignite UI for Angular package, along with all of its dependencies, font imports and styles references to your project, by running the following command: +Then launch the step-by-step guide: ```cmd -ng add igniteui-angular +ig ``` ->[!NOTE] -> You don't need to install the `igniteui-theming` package explicitly, it comes with Ignite UI for Angular. - ->[!NOTE] -> Keep in mind that with the command above you will install the Trial version of any Ignite UI for Angular component under commercial license (such as `igxGrid`). - -#### Additional packages - -In addition, you may want to include a number of Ignite UI components to your project, such as: - -- Grid Lite - Open-Source +
+ + Play Video + +

Building Your First Ignite UI CLI App

+
-The [Grid Lite component](../grid-lite/overview.md) is designed to provide a minimal set of features under MIT license that should serve a wide range of projects that need essential data-display functionality with minimal overhead, and the performance users expect. It is designed for developers who need fast, lightweight data presentation without the complexity of an enterprise grid. Its API resembles that of the commercial `IgxGrid` ensuring a simple and straightforward upgrade path. +Or create a project directly in one command, for example: ```cmd -ng add igniteui-grid-lite +ig new --framework=angular --type=igx-ts --template=side-nav ``` -- Dock Manager - Premium +For a full walkthrough of all available options and project templates, see the [Step-by-Step guide using Ignite UI CLI](cli/step-by-step-guide-using-cli.md). -The Ignite UI Dock Manager component provides means to manage the layout of your application through panes, allowing your end-users to customize it further by pinning, resizing, moving and hiding panes. +>[!NOTE] +> At some point during the process you'll be asked to [log in to our npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already set up. This applies if you plan to use any components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). -```cmd -ng add igniteui-dockmanager -``` +Learn more about the [Ignite UI CLI](cli-overview.md). - ### Upgrading from Trial to Licensed @@ -115,46 +107,24 @@ It's very important to [perform a correct setup of the private npm feed environm Details on the entire process [could be found here](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). -### Quick Start with Angular Schematics & Ignite UI CLI +### Quick Start with Angular Schematics -To create an application from scratch and configure it to use the Ignite UI for Angular components you can use either the Ignite UI for Angular Schematics or the Ignite UI CLI. The first step is to install the respective package globally as follows: +You can also create an application from scratch using the **Ignite UI for Angular Schematics**. Install the package globally: ```cmd npm i -g @igniteui/angular-schematics ``` -or: - -```cmd -npm install -g igniteui-cli -``` - -Our [guided experience using the Ignite UI CLI](cli/step-by-step-guide-using-cli.md) or [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) is the easiest way to bootstrap a configured application. - -To activate the guide using the Ignite UI for Angular Schematics run: +Then activate the guided setup: ```cmd ng new --collection="@igniteui/angular-schematics" ``` -or run the following command in case you are using the CLI tool: - -```cmd -ig -``` - >[!NOTE] -> At some point during the steps execution [you'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). This is part of the Trial to License account setup and is applicable if you plan to use any of the components under [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). - -
- - Play Video - -

Building Your First Ignite UI CLI App

-
+> At some point during the process you'll be asked to [log in to our npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already set up. This applies if you plan to use any components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). -Learn more about our [Angular Schematics & Ignite UI CLI](cli-overview.md). +Learn more about the [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md). ## Using Ignite UI for Angular From b3104200c1c548dad0d916c4ebc6b023869130ac Mon Sep 17 00:00:00 2001 From: Ivaylo Barakov Date: Thu, 2 Apr 2026 14:35:28 +0300 Subject: [PATCH 04/21] Update en/components/general/cli/step-by-step-guide-using-angular-schematics.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- .../general/cli/step-by-step-guide-using-angular-schematics.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md index bfa945b556..e3a2ee0aeb 100644 --- a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -75,4 +75,4 @@ If you choose to add a scenario to your application you will also get a list of After adding a template to your application, you will be asked whether you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. -You can always add more Ignite UI for Angular views to your application at latter moment using the `ng g @igniteui/angular-schematics:c [template] [name]` command. +You can always add more Ignite UI for Angular views to your application later using the `ng g @igniteui/angular-schematics:c [template] [name]` command. From 36094fc461939af5a913ce199b1b35a81b3795ab Mon Sep 17 00:00:00 2001 From: Ivaylo Barakov Date: Thu, 2 Apr 2026 14:35:50 +0300 Subject: [PATCH 05/21] Update en/components/general/getting-started.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- en/components/general/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 93762188b3..ee8e3c5c1d 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -37,7 +37,7 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo ## Installing Ignite UI for Angular -Ignite UI for Angular can be installed using the Ignite UI CLI or Angular Schematics. +Ignite UI for Angular can be installed using the Ignite UI CLI, Angular Schematics, or the Angular CLI `ng add igniteui-angular` command (for existing Angular CLI projects). ### Quick Start with Ignite UI CLI From 4c6071efde49237c7da028ec217b80e790daae42 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Mon, 6 Apr 2026 09:58:05 +0300 Subject: [PATCH 06/21] chore: add links --- en/components/general/cli-overview.md | 2 +- en/components/general/cli/getting-started-with-cli.md | 2 +- en/components/general/getting-started.md | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/en/components/general/cli-overview.md b/en/components/general/cli-overview.md index cbbce963cf..b5ffdc6abc 100644 --- a/en/components/general/cli-overview.md +++ b/en/components/general/cli-overview.md @@ -18,4 +18,4 @@ Both versions of the tooling allow for various projects, component and scenario The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants — such as GitHub Copilot, Claude, or Cursor — directly to Ignite UI component documentation and API references. Once configured, your AI assistant can look up component docs, retrieve API details, and generate accurate Ignite UI code without leaving your editor. -For setup instructions and available tools, see ... +For setup instructions and available tools, see [Ignite UI CLI MCP Overview](./how-to/general-how-to-mcp-overview.md). diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 860973a496..8380fab4e3 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -192,7 +192,7 @@ ig mcp ``` >[!NOTE] -> For full setup instructions, supported clients (VS Code, Claude Desktop, Cursor), and available tools, see... +> For full setup instructions, supported clients (VS Code, Claude Desktop, Cursor), and available tools, see [Ignite UI CLI MCP Overview](../how-to/general-how-to-mcp-overview.md). ## Ignite UI CLI Commands diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index ee8e3c5c1d..1d67fa994d 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -280,16 +280,16 @@ Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic. The **Ignite UI CLI** also includes a built-in **MCP (Model Context Protocol) server** that gives AI assistants live access to Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server lets your assistant query up-to-date docs, search APIs, and retrieve setup guides on demand. -Learn more in the Ignite UI MCP Server topic. +Learn more in the [Ignite UI CLI MCP Overview](./how-to/general-how-to-mcp-overview.md). ## Additional Resources
- [Ignite UI for Angular Skills](../ai/skills.md) -- Ignite UI MCP Server - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) +- [Ignite UI CLI MCP](./how-to/general-how-to-mcp-overview.md) - [Grid overview](../grid/grid.md) - [Grid Lite overview](../grid-lite/overview.md) From 07927bd622d752611613259f01030922134c75b5 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Mon, 6 Apr 2026 12:15:52 +0300 Subject: [PATCH 07/21] chore: update getting started --- en/components/general/getting-started.md | 109 +++++++++++++++-------- 1 file changed, 71 insertions(+), 38 deletions(-) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 1d67fa994d..367a8399e0 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -37,24 +37,36 @@ Ignite UI for Angular is offered under a dual-license model, which allows for bo ## Installing Ignite UI for Angular -Ignite UI for Angular can be installed using the Ignite UI CLI, Angular Schematics, or the Angular CLI `ng add igniteui-angular` command (for existing Angular CLI projects). +Ignite UI for Angular can be installed using the Ignite UI for Angular Schematics, the Ignite UI CLI, or the Angular CLI. -### Quick Start with Ignite UI CLI +### Quick Start with Ignite UI CLI & Angular Schematics -The easiest way to create a new Ignite UI for Angular application from scratch is with the **Ignite UI CLI**. It scaffolds a fully configured project and walks you through an interactive setup with no manual configuration required. - -Install the CLI globally: +To create an application from scratch and configure it to use Ignite UI for Angular components, use either the **Ignite UI CLI** or the **Ignite UI for Angular Schematics**. Install the respective package globally: ```cmd npm install -g igniteui-cli ``` -Then launch the step-by-step guide: +or: + +```cmd +npm i -g @igniteui/angular-schematics +``` + +The guided experience is the easiest way to bootstrap a configured application. + +To activate the guide using the Ignite UI for Angular Schematics, run: ```cmd ig ``` +Or, if you are using Angular Schematics: + +```cmd +ng new --collection="@igniteui/angular-schematics" +``` + -Or create a project directly in one command, for example: +You can also skip the guide and create a project directly: ```cmd ig new --framework=angular --type=igx-ts --template=side-nav ``` -For a full walkthrough of all available options and project templates, see the [Step-by-Step guide using Ignite UI CLI](cli/step-by-step-guide-using-cli.md). - >[!NOTE] > At some point during the process you'll be asked to [log in to our npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already set up. This applies if you plan to use any components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). -Learn more about the [Ignite UI CLI](cli-overview.md). - - -### Upgrading from Trial to Licensed - -If you want to start using the **Licensed Ignite UI for Angular package** it is strongly recommended to follow the [Upgrading packages guide with Schematics and Ignite UI CLI](ignite-ui-licensing.md#upgrading-packages-using-our-angular-schematics-or-ignite-ui-cli). +For a full walkthrough of all available options and project templates, see the [Step-by-Step guide using Ignite UI CLI](cli/step-by-step-guide-using-cli.md) or the [Step-by-Step guide using Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md). -Following is a quick overview of the steps that you need to perform in order to start using the **Licensed version of Ignite UI for Angular**. Depending on your project setup, either run the following schematic in your project: - -```bash -ng g @igniteui/angular-schematics:upgrade-packages -``` - -or if using `igniteui-cli`: - -```bash -ig upgrade-packages -``` - -The schematic will take care of switching the package dependencies of the project and update source references. -[You'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). +Learn more in the [Angular Schematics & Ignite UI CLI](cli-overview.md) topic. #### Login to our npm registry with a new setup @@ -107,29 +99,70 @@ It's very important to [perform a correct setup of the private npm feed environm Details on the entire process [could be found here](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). -### Quick Start with Angular Schematics +### Quick Start with the Angular CLI -You can also create an application from scratch using the **Ignite UI for Angular Schematics**. Install the package globally: +If you already have an Angular project or prefer the Angular CLI workflow, use `ng add` to install Ignite UI for Angular and configure it in your workspace. + +To create a new Angular app first, run: ```cmd -npm i -g @igniteui/angular-schematics +ng new --style=scss ``` -Then activate the guided setup: +It is recommended to use SCSS as Ignite UI for Angular styles are built on the [Ignite UI for Angular Theming Library](../themes.md), and `ng add` sets up the default theme automatically. You can adjust it globally or per component after that. + +Once the project is ready, install Ignite UI for Angular: ```cmd -ng new --collection="@igniteui/angular-schematics" +ng add igniteui-angular ``` >[!NOTE] -> At some point during the process you'll be asked to [log in to our npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already set up. This applies if you plan to use any components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). +> This installs a trial version of the licensed Ignite UI for Angular components (such as `igxGrid`). If you scaffolded your project with **Ignite UI CLI**, skip this step — the CLI already handles the package setup. + +#### Additional packages + +Some Ignite UI components ship as separate packages. You can add them to your project with `ng add`: -Learn more about the [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md). +**[Grid Lite](../grid-lite/overview.md) — open source (MIT)** + +A lightweight grid under the MIT license for projects that need basic data display without the full commercial feature set. Its API is close to `IgxGrid`, so upgrading later is straightforward. + +```cmd +ng add igniteui-grid-lite +``` + +**[Dock Manager](../dock-manager.md) — premium** + +A pane-based layout component. End users can pin, resize, move, and hide panes at runtime. + +```cmd +ng add igniteui-dockmanager +``` ## Using Ignite UI for Angular We are now ready to start using Ignite UI for Angular components! +### Upgrading from Trial to Licensed + +If you want to start using the **Licensed Ignite UI for Angular package** it is strongly recommended to follow the [Upgrading packages guide with Schematics and Ignite UI CLI](ignite-ui-licensing.md#upgrading-packages-using-our-angular-schematics-or-ignite-ui-cli). + +Following is a quick overview of the steps that you need to perform in order to start using the **Licensed version of Ignite UI for Angular**. Depending on your project setup, either run the following schematic in your project: + +```bash +ng g @igniteui/angular-schematics:upgrade-packages +``` + +or if using `igniteui-cli`: + +```bash +ig upgrade-packages +``` + +The schematic will take care of switching the package dependencies of the project and update source references. +[You'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). + ### Add components automatically #### Import modules and use components @@ -280,7 +313,7 @@ Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic. The **Ignite UI CLI** also includes a built-in **MCP (Model Context Protocol) server** that gives AI assistants live access to Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server lets your assistant query up-to-date docs, search APIs, and retrieve setup guides on demand. -Learn more in the [Ignite UI CLI MCP Overview](./how-to/general-how-to-mcp-overview.md). + ## Additional Resources @@ -289,7 +322,7 @@ Learn more in the [Ignite UI CLI MCP Overview](./how-to/general-how-to-mcp-overv - [Ignite UI for Angular Skills](../ai/skills.md) - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) -- [Ignite UI CLI MCP](./how-to/general-how-to-mcp-overview.md) + - [Grid overview](../grid/grid.md) - [Grid Lite overview](../grid-lite/overview.md) From 61169699f8fe5c6c0e7f8f91bf8c2f812e2dfbb0 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 6 Apr 2026 22:55:57 +0300 Subject: [PATCH 08/21] Revise Getting Started guide for Ignite UI for Angular Updated the 'Getting Started' guide for Ignite UI for Angular to include installation instructions, prerequisites, and AI-assisted development tools. Enhanced descriptions and keywords for better clarity and searchability. --- en/components/general/getting-started.md | 287 ++++++++--------------- 1 file changed, 98 insertions(+), 189 deletions(-) diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index 367a8399e0..9491b9ae50 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -1,173 +1,115 @@ --- title: Getting Started | Ignite UI for Angular | Infragistics -_description: Ignite UI for Angular is a complete set of native Angular UI components, which allow you to build fast, feature-rich and Material designed applications! -_keywords: ignite ui for angular, getting started, angular components +_description: Install Ignite UI for Angular and render your first component in under 5 minutes. Covers Ignite UI CLI scaffolding, Angular Schematics, ng add setup, manual standalone usage, and AI-assisted development tooling. +_keywords: ignite ui for angular, getting started, angular components, install, setup, igniteui-angular, infragistics +last_updated: "2025-04-06" --- -# Getting started with Ignite UI for Angular + -[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework. +# Get Started with Ignite UI for Angular -Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. For more details, refer to the [Ignite UI Licensing](./ignite-ui-licensing.md) and [Open Source vs Premium](./open-source-vs-premium.md) topics. +[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a library of 100+ enterprise UI components - including data grids, charts, editors, navigation controls, and layout containers - distributed as the `igniteui-angular` npm package by Infragistics. This guide walks through three installation paths (Ignite UI CLI, Angular Schematics, and Angular CLI with `ng add`) and ends with a working `IgxGridComponent` rendered from local data. -## Prerequisites +Ignite UI for Angular targets Angular 17 and later, with standalone components as the default bootstrapping model. It does not support Vue, React, or Web Components natively - for those frameworks see [Ignite UI for React](https://www.infragistics.com/products/ignite-ui-react), [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components), and [Ignite UI for Blazor](https://www.infragistics.com/products/ignite-ui-blazor). -1. Install NodeJS. -2. Install Visual Studio Code. - - -
- -## Installing Ignite UI for Angular - -Ignite UI for Angular can be installed using the Ignite UI for Angular Schematics, the Ignite UI CLI, or the Angular CLI. - -### Quick Start with Ignite UI CLI & Angular Schematics - -To create an application from scratch and configure it to use Ignite UI for Angular components, use either the **Ignite UI CLI** or the **Ignite UI for Angular Schematics**. Install the respective package globally: +Ignite UI for Angular is offered under a dual-license model: some components are open source under MIT, others require a commercial license. For details see [Ignite UI Licensing](./ignite-ui-licensing.md) and [Open Source vs Premium](./open-source-vs-premium.md). -```cmd -npm install -g igniteui-cli -``` +## Prerequisites -or: +- Node.js 20 LTS or later (Node.js 22 LTS recommended) +- npm 10+ (bundled with Node.js 20), yarn, or pnpm +- Angular CLI 17+ for the `ng add` installation path +- Visual Studio Code or any editor with TypeScript language support -```cmd -npm i -g @igniteui/angular-schematics -``` +## Install Ignite UI for Angular -The guided experience is the easiest way to bootstrap a configured application. +Ignite UI for Angular supports three installation paths. Use the Ignite UI CLI or Angular Schematics when starting a new project from scratch. Use `ng add` when adding Ignite UI for Angular to an existing Angular workspace. -To activate the guide using the Ignite UI for Angular Schematics, run: +### Install with Ignite UI CLI + +The Ignite UI CLI is a standalone command-line tool that scaffolds a fully configured Angular project with Ignite UI for Angular in a single command. Install it globally: ```cmd -ig +npm install -g igniteui-cli ``` -Or, if you are using Angular Schematics: +Activate the guided project wizard: ```cmd -ng new --collection="@igniteui/angular-schematics" +ig ``` -
- - Play Video - -

Building Your First Ignite UI CLI App

-
- -You can also skip the guide and create a project directly: +Or create a project non-interactively: ```cmd -ig new --framework=angular --type=igx-ts --template=side-nav +ig new --framework=angular --type=igx-ts --template=side-nav ``` ->[!NOTE] -> At some point during the process you'll be asked to [log in to our npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already set up. This applies if you plan to use any components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). +> [!NOTE] +> As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project that uses standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`. -For a full walkthrough of all available options and project templates, see the [Step-by-Step guide using Ignite UI CLI](cli/step-by-step-guide-using-cli.md) or the [Step-by-Step guide using Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md). +> [!NOTE] +> At some point during the process you may be asked to [log in to the Infragistics npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured. This applies when using components under a [commercial license](./open-source-vs-premium.md#comparison-table-for-all-components). -Learn more in the [Angular Schematics & Ignite UI CLI](cli-overview.md) topic. +For a full walkthrough of all CLI options and project templates, see [Getting Started with Ignite UI CLI](cli/getting-started-with-cli.md) and [Angular Schematics and Ignite UI CLI](cli-overview.md). -#### Login to our npm registry with a new setup +### Install with Angular Schematics -The approach described above covers only the scenarios where Ignite UI for Angular Trial package is already installed. If you are performing a new setup of a project or just starting with using Ignite UI for Angular, follow the guidance below. +The Ignite UI for Angular Schematics collection integrates into the Angular CLI workflow and provides the same guided experience as the standalone CLI, without requiring a separate global tool: -It's very important to [perform a correct setup of the private npm feed environment](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide), by: +```cmd +npm i -g @igniteui/angular-schematics +``` -- Ensuring a valid setup of the private registry. -- Log in to our private feed using npm by specifying a non-trial user account and password. +Activate the guided wizard: -Details on the entire process [could be found here](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). +```cmd +ng new --collection="@igniteui/angular-schematics" +``` -### Quick Start with the Angular CLI +For a step-by-step walkthrough see [Step-by-Step Guide Using Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md). -If you already have an Angular project or prefer the Angular CLI workflow, use `ng add` to install Ignite UI for Angular and configure it in your workspace. +### Install with Angular CLI (`ng add`) -To create a new Angular app first, run: +If you already have an Angular project or prefer to work entirely within the Angular CLI, use `ng add` to install and configure Ignite UI for Angular. Create a new Angular app first if needed: ```cmd -ng new --style=scss +ng new --style=scss ``` -It is recommended to use SCSS as Ignite UI for Angular styles are built on the [Ignite UI for Angular Theming Library](../themes.md), and `ng add` sets up the default theme automatically. You can adjust it globally or per component after that. - -Once the project is ready, install Ignite UI for Angular: +SCSS is recommended because the [Ignite UI for Angular Theming Library](../themes.md) is built on it and `ng add` configures the default theme automatically. Then add Ignite UI for Angular: ```cmd ng add igniteui-angular ``` ->[!NOTE] -> This installs a trial version of the licensed Ignite UI for Angular components (such as `igxGrid`). If you scaffolded your project with **Ignite UI CLI**, skip this step — the CLI already handles the package setup. +> [!NOTE] +> `ng add` installs the trial version of `igniteui-angular`. If your project was scaffolded with the Ignite UI CLI, skip this step - the CLI already handles package setup. To switch to the licensed package later, see [Upgrade from Trial to Licensed](#upgrade-from-trial-to-licensed) below. #### Additional packages -Some Ignite UI components ship as separate packages. You can add them to your project with `ng add`: +Some Ignite UI for Angular components ship as separate npm packages and are added independently: -**[Grid Lite](../grid-lite/overview.md) — open source (MIT)** +**[Grid Lite](../grid-lite/overview.md) - open source (MIT)** -A lightweight grid under the MIT license for projects that need basic data display without the full commercial feature set. Its API is close to `IgxGrid`, so upgrading later is straightforward. +A lightweight grid for projects that need basic data display without the full commercial feature set. Its API is compatible with `IgxGrid`, so upgrading later requires minimal changes. ```cmd ng add igniteui-grid-lite ``` -**[Dock Manager](../dock-manager.md) — premium** +**[Dock Manager](../dock-manager.md) - premium** -A pane-based layout component. End users can pin, resize, move, and hide panes at runtime. +A pane-based layout component where end users can pin, resize, move, and hide panes at runtime. ```cmd ng add igniteui-dockmanager ``` -## Using Ignite UI for Angular - -We are now ready to start using Ignite UI for Angular components! - -### Upgrading from Trial to Licensed - -If you want to start using the **Licensed Ignite UI for Angular package** it is strongly recommended to follow the [Upgrading packages guide with Schematics and Ignite UI CLI](ignite-ui-licensing.md#upgrading-packages-using-our-angular-schematics-or-ignite-ui-cli). - -Following is a quick overview of the steps that you need to perform in order to start using the **Licensed version of Ignite UI for Angular**. Depending on your project setup, either run the following schematic in your project: - -```bash -ng g @igniteui/angular-schematics:upgrade-packages -``` - -or if using `igniteui-cli`: - -```bash -ig upgrade-packages -``` - -The schematic will take care of switching the package dependencies of the project and update source references. -[You'll be asked to login to our npm registry if not already setup](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide). - -### Add components automatically - -#### Import modules and use components +## Add Components with CLI or Schematics -Now we can add new components to our application using either the `component` schematic or the `add` command: +After the initial project setup, add Ignite UI for Angular component views using either the `component` schematic or the `add` command: ```cmd ng g @igniteui/angular-schematics:component @@ -178,43 +120,22 @@ ig add ``` > [!NOTE] -> Please note that the [`ig add`](https://github.com/IgniteUI/igniteui-cli/wiki/add) command can be used if the application was created by using the Ignite UI CLI or -> if it was created by using the Angular CLI with Ignite UI for Angular added to it by using the **ng add igniteui-angular** command. +> The `ig add` command is available in projects created by the Ignite UI CLI or in Angular CLI projects where Ignite UI for Angular was added with `ng add igniteui-angular`. -After going through the options of the menu and choosing which component we want to add to our application, we will notice that we have a brand new component in our project, which we can use anywhere on our page! +## Add Components Manually (Standalone) -#### Run application +As of Angular 19, standalone components are the default bootstrapping model. The following example adds an `IgxGridComponent` to a standalone Angular application without using Schematics or the CLI. -Now let’s run our application to see our awesome page! - -```cmd -npm start -``` - -### Add components manually - -As of Angular 19, standalone components are the default way to build Angular apps, removing the need for `NgModules` and simplifying the process of adding components significantly. So let's use this to add an [**igxGrid**](../grid/grid.md) component to our app. - -Before we start though, please note that some components have animations that require a provider as part of the `bootstrapApplication` call. - -```typescript -// main.ts - -import { appConfig } from './app/app.config'; -import { AppComponent } from './app/app.component'; - -bootstrapApplication(AppComponent, appConfig) - .catch((err) => console.error(err)); -``` +Some components use animations, which require a provider in the `bootstrapApplication` call. Configure this in `app.config.ts`: ```typescript // app/app.config.ts - import { ApplicationConfig, importProvidersFrom } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { provideAnimations } from '@angular/platform-browser/animations'; +import { Provider } from '@angular/core'; -const providers: Provider = [ +const providers: Provider[] = [ importProvidersFrom(BrowserModule), provideAnimations() ]; @@ -222,34 +143,14 @@ const providers: Provider = [ export const appConfig: ApplicationConfig = { providers }; ``` -#### Use components - -We are now ready to use the igxGrid in our markup! Let's go ahead and define it in our **app.component.html** file: - -```html - - -
-

- Welcome to {{title}}! -

-
- -
- - - - -
-``` +### Import and use the Grid -We will also define the data of the grid and the title of our application that are referenced from the **app.component.ts**. As we are using standalone components we simply have to add the `IgxGridComponent` class to our app's imports, alongside any other components used in the template. In our example, as we are defining columns, we also have to add the `IgxColumnComponent` to the import array. +Import `IgxGridComponent` and `IgxColumnComponent` directly in your standalone component. Because this is a standalone component, add both to the `imports` array rather than to an `NgModule`: ```typescript // app.component.ts - import { Component } from '@angular/core'; -import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/grid'; +import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular'; @Component({ selector: 'app-root', @@ -259,75 +160,83 @@ import { IgxGridComponent, IgxColumnComponent } from 'igniteui-angular/grids/gri }) export class AppComponent { localData = [ - { Name:'John', Age: 29 }, - { Name:'Alice', Age: 27 }, - { Name:'Jessica', Age: 31 }, + { Name: 'John', Age: 29 }, + { Name: 'Alice', Age: 27 }, + { Name: 'Jessica', Age: 31 }, ]; - - title = 'My Ignite UI project'; } ``` - +```html + + + + + +``` -#### Run application +This renders an Ignite UI for Angular Grid with column filtering enabled, displaying three rows of local data. -Finally, we can run our new application by using one of the following commands: +### Run the application -- If the application was created by using the Ignite UI CLI: +Run the application using the command for your setup: ```cmd ig start ``` -- If the application was created by using the Angular CLI: +Or, for projects created with the Angular CLI: ```cmd ng serve ``` -The final result should look something like this: +Ignite UI for Angular application with IgxGridComponent rendered +## Upgrade from Trial to Licensed -Ignite UI Project +To switch from the trial `igniteui-angular` package to the licensed version, run the upgrade schematic in your project root: +```bash +ng g @igniteui/angular-schematics:upgrade-packages +``` -## API References +Or, using the Ignite UI CLI: -In this article we learned how to create our own Ignite UI for Angular application from scratch by taking advantage of the fully-automated process of Ignite UI for Angular projects creation in the Ignite UI CLI. We also learned how to add Ignite UI for Angular to an existing application by using the Angular CLI. We designed our own page by including the [`IgxGridComponent`]({environment:angularApiUrl}/classes/igxgridcomponent.html) to it, which itself offers some awesome features, which you can take a look at by referring to the navigation menu. +```bash +ig upgrade-packages +``` -- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) -- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) +The schematic updates package dependencies and replaces source references. You will be prompted to [log in to the Infragistics private npm registry](ignite-ui-licensing.md#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured. ## AI-Assisted Development -Ignite UI for Angular ships with **Agent Skills** — structured knowledge files that teach AI coding assistants (GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to work with the library. Skills cover components, data grids, grid data operations, and theming. +Ignite UI for Angular ships two tools for AI-assisted development. -Learn more in the [Ignite UI for Angular Skills](../ai/skills.md) topic. +**Agent Skills** are structured knowledge files that teach AI coding assistants - GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI - how to work correctly with Ignite UI components, APIs, and theming patterns. Skills cover data grids, grid operations, charting, and theming. See [Ignite UI for Angular Skills](../ai/skills.md). -The **Ignite UI CLI** also includes a built-in **MCP (Model Context Protocol) server** that gives AI assistants live access to Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server lets your assistant query up-to-date docs, search APIs, and retrieve setup guides on demand. +**The Ignite UI MCP Server** is a built-in server in the Ignite UI CLI that connects AI assistants to live Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server answers queries about current APIs, retrieves setup guides on demand, and supports accurate code generation for Ignite UI components. Start it with `ig mcp` after installing the CLI. For client configuration and available tools, see [Ignite UI CLI MCP Overview](../ai/cli-mcp.md). - +## API References -## Additional Resources +- [IgxGridComponent]({environment:angularApiUrl}/classes/igxgridcomponent.html) +- [IgxGridComponent Styles]({environment:sassApiUrl}/themes#function-grid-theme) -
+## Additional Resources - [Ignite UI for Angular Skills](../ai/skills.md) -- [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) +- [Ignite UI CLI MCP Overview](../ai/cli-mcp.md) +- [Angular Schematics and Ignite UI CLI](cli-overview.md) - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands) - - [Grid overview](../grid/grid.md) - [Grid Lite overview](../grid-lite/overview.md) -
+--- + Our community is active and always welcoming to new ideas. - [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular) - [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular) +- [Ignite UI for Angular **Discord**](https://discord.com/channels/836634487483269200/836636712292581456) From 7abdf56b1042b42ce5cc30e21ab8dc5ffb29a667 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 6 Apr 2026 23:27:18 +0300 Subject: [PATCH 09/21] Revise CLI overview for Ignite UI and Angular Schematics Updated the CLI overview to enhance clarity and detail about the Ignite UI CLI and Angular Schematics, including AI assistant integration. --- en/components/general/cli-overview.md | 46 +++++++++++++++++++++------ 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/en/components/general/cli-overview.md b/en/components/general/cli-overview.md index b5ffdc6abc..326f91bba8 100644 --- a/en/components/general/cli-overview.md +++ b/en/components/general/cli-overview.md @@ -1,21 +1,49 @@ --- -title: Angular Schematics | Angular CLI | Ignite UI for Angular | Infragistics -_description: Angular Schematics and Ignite UI CLI help you get a jump start on creating and modifying projects with Ignite UI for Angular components. -_keywords: igniteui for angular, angular schematics, cli, infragistics +title: Angular Schematics & Ignite UI CLI | Ignite UI for Angular | Infragistics +_description: The Ignite UI CLI and Ignite UI for Angular Schematics collection scaffold Angular projects and component views pre-configured for Ignite UI for Angular. Includes MCP server for AI assistant integration. +_keywords: ignite ui for angular, angular schematics, ignite ui cli, scaffolding, infragistics +last_updated: "2025-04-06" --- + + # Angular Schematics & Ignite UI CLI -Our CLI tools provide project templates pre-configured for Ignite UI for Angular that help you get your next app off the ground in record time. A selection of views with Ignite UI for Angular components that can be further added to projects provide a substantial productivity boost for developers. +The Ignite UI CLI and the Ignite UI for Angular Schematics collection are two complementary scaffolding tools for generating Angular projects and component views pre-configured for Ignite UI for Angular. Both provide a guided step-by-step wizard and non-interactive command modes. Both produce the same project output - they differ only in how they integrate with your workflow. + +The Ignite UI CLI does not manage Blazor or Web Components projects through this Angular toolchain. For the Angular-only Schematics workflow without a separate global tool, use `@igniteui/angular-schematics` directly with the Angular CLI. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](getting-started.md). + +## Ignite UI CLI + +[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) is a standalone global command-line tool for creating and scaffolding applications across Angular, React, and jQuery. Install it with `npm install -g igniteui-cli` and invoke it with the `ig` command. + +The CLI provides a guided wizard (`ig` or `ig new`) and non-interactive project creation (`ig new --framework=angular --type=igx-ts`), component scaffolding (`ig add`), a development server (`ig start`), and a built-in MCP server for AI assistant integration (`ig mcp`). + +For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.md). -[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) is a stand-alone command-line tool for creating and scaffolding applications for a variety of frameworks. You can find more information and examples about its usage in the [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.md) topic. +## Ignite UI for Angular Schematics -[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) are available as a collection that can be used with the [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli). They offer similar core Ignite UI CLI functionality, but one that's integrated with the Schematics workflow and focused specifically on this product. The schematics collection is added to your project when you [install Ignite UI for Angular](getting-started.md#installing-ignite-ui-for-angular). You can find more information and examples about its usage in the [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.md) topic. +[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) are a schematic collection that integrates into the Angular CLI. The collection is added to your project automatically when you run `ng add igniteui-angular`. Invoke it with `ng new --collection="@igniteui/angular-schematics"` for project creation and `ng g @igniteui/angular-schematics:component` for component scaffolding. -Both versions of the tooling allow for various projects, component and scenario views (templates) and offer [guided step-by-step mode using Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) and [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md). +The Schematics collection provides the same core project templates and component views as the CLI, within the native Angular CLI workflow. It does not include the MCP server - for AI assistant integration, use the Ignite UI CLI alongside your Angular CLI project. + +For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.md). + +## Step-by-Step Guides + +Both tools support a guided interactive mode and a direct command mode: + +- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli.md) +- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md) ## AI Assistant Integration (MCP) -The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants — such as GitHub Copilot, Claude, or Cursor — directly to Ignite UI component documentation and API references. Once configured, your AI assistant can look up component docs, retrieve API details, and generate accurate Ignite UI code without leaving your editor. +The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants - GitHub Copilot, Claude, Cursor, and others - to live Ignite UI component documentation and API references. Once configured, your AI assistant can look up component APIs, retrieve setup guides, and generate accurate Ignite UI for Angular code without leaving your editor. + +Start the MCP server with: + +```cmd +ig mcp +``` -For setup instructions and available tools, see [Ignite UI CLI MCP Overview](./how-to/general-how-to-mcp-overview.md). +For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.md). From c5195b65c396613e056af6d995dd621342932bfa Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 6 Apr 2026 23:28:48 +0300 Subject: [PATCH 10/21] Revise Ignite UI CLI getting started documentation Updated the Ignite UI CLI documentation to enhance clarity and detail, including installation instructions, project creation steps, and AI assistant integration. --- .../general/cli/getting-started-with-cli.md | 138 ++++++++++-------- 1 file changed, 80 insertions(+), 58 deletions(-) diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 8380fab4e3..99269cbedc 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -1,36 +1,53 @@ --- title: Getting Started with Ignite UI CLI | Ignite UI for Angular | Infragistics -_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. -_keywords: angular cli, ignite ui for angular, infragistics +_description: Install the Ignite UI CLI globally and use it to scaffold Angular projects, add component views, run a development server, and connect an MCP server to your AI coding assistant. +_keywords: ignite ui cli, ignite ui for angular, angular scaffolding, getting started, infragistics +last_updated: "2025-04-06" --- -## Getting Started with Ignite UI CLI + -If you are creating a new Angular application from scratch, we recommend using the approach described bellow as it will provide you with an user-friendly guided experience. The guide will lead you through all the setup options and your project will be scaffolded in a blink of an eye. +# Getting Started with Ignite UI CLI -To get started install [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) globally: +The Ignite UI CLI is a standalone global command-line tool for scaffolding Angular, React, and jQuery projects pre-configured for Ignite UI components. It provides a guided step-by-step wizard for first-time setup, non-interactive `new` and `add` commands for scripted workflows, a development server, and a built-in MCP server for connecting AI coding assistants to live Ignite UI documentation. + +The CLI does not replace the Angular CLI - it works alongside it. Projects created with the Ignite UI CLI are standard Angular workspaces and are fully compatible with `ng` commands after scaffolding. + +## Install the Ignite UI CLI + +Install the Ignite UI CLI globally using npm: ```cmd -npm install -g igniteui-cli +npm install -g igniteui-cli ``` -If you are using `yarn` package manager: +Or, using yarn: ```cmd yarn global add igniteui-cli ``` -### Using guided experience +Verify the installation: + +```cmd +ig version +``` + +## Create a New Project + +The Ignite UI CLI provides two modes for project creation: a guided interactive wizard and a direct command with arguments. -The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI CLI](step-by-step-guide-using-cli.md). +### Use the guided wizard -To activate the guide using the Ignite UI CLI run: +The guided wizard is the recommended starting point for new projects. It prompts you to choose a project type, name, template, and theme, then scaffolds and commits the project automatically. + +To activate the wizard: ```cmd ig ``` -or +or: ```cmd ig new @@ -39,31 +56,33 @@ ig new
- Play video + Play video: Building Your First Ignite UI CLI App

Building Your First Ignite UI CLI App

-## Create a new project +For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli.md). + +### Create a project directly -When using [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) you need to provide `angular` as framework and `igx-ts` as your project type argument to the `new` command: +To create an Angular project non-interactively, provide `angular` as the framework and `igx-ts` as the project type: ```cmd -ig new newAngularProject --framework=angular --type=igx-ts --template=side-nav +ig new --framework=angular --type=igx-ts --template=side-nav ``` ->[!NOTE] -> As of `v13.1.0`, the `igx-ts` project type will generate a project that uses standalone components by default. If you prefer to use the module-based bootstrapping instead you can set the `type` to be `igx-ts-legacy`. +> [!NOTE] +> As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project with standalone components by default. To use NgModule-based bootstrapping instead, set `--type=igx-ts-legacy`. -The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: +The new application is created in a directory named after the project. The following project templates are available for Angular: -| template id | template description | -| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with side navigation drawer | -| side-nav-auth | Side navigation project extended with user authentication module.
[Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | +| Template ID | Description | +| :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with a side navigation drawer | +| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template.md) for details. | -Additionally, you can specify **arguments** to control the theme or skip packages install: +The following arguments are available when creating a project:
name @@ -81,7 +100,7 @@ Additionally, you can specify **arguments** to control the theme or skip package --framework (alias: -f) default value: "jquery"

- Framework to setup project for. The supported frameworks are jQuery, Angular and React. + Framework to set up the project for. Supported values are: jquery, angular, react.

@@ -111,7 +130,7 @@ Additionally, you can specify **arguments** to control the theme or skip package --skip-git (alias: --sg)

- When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used. + Skips automatic Git repository initialization. If omitted, the global skip-git configuration property is used.

@@ -121,7 +140,7 @@ Additionally, you can specify **arguments** to control the theme or skip package --skip-install (alias: --si)

- The new command will install package dependencies on project creation. Passing this flag will skip the initial installation. + Skips the initial npm package installation on project creation.

@@ -131,23 +150,27 @@ Additionally, you can specify **arguments** to control the theme or skip package --template

- Use this option if there are different project templates for a specific framework type. - Currently this option is available only for Ignite UI for Angular igx-ts project types.

+ Specifies the project template when multiple templates exist for a framework type. Currently available for Ignite UI for Angular igx-ts project types. +

-## Add template - -To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Ignite UI CLI, Angular Schematics or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#installing-ignite-ui-for-angular). +## Add a Component Template -We use the `ig add [template] [name]` command: +To add an [available Ignite UI for Angular template](component-templates.md) to an existing project, provide the template ID and a name for the new component: ```cmd ig add grid newGrid ``` -To get a list of all the [available templates](component-templates.md) you can also execute the [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) command in your project directory. +To list all available templates in your project directory: + +```cmd +ig list +``` + +Template addition is supported in projects created with the Ignite UI CLI, Angular Schematics, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli.md#add-view). -Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: +The following arguments are available when adding a template:
module @@ -155,10 +178,10 @@ Additionally, you can specify the module in which the component will be register --module (alias: -m)

- note: module argument is applicable only in Angular projects. + Applicable only in Angular projects.

- Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered: + Path to the module.ts file, relative to /src/app/, where the new component should be registered:

ig add combo newCombo --module=myModule/myModule.module.ts
@@ -169,13 +192,13 @@ Additionally, you can specify the module in which the component will be register --skip-route (alias: -srk)

- Don't auto-generate an app navigation route for the new component + Skips auto-generation of an app navigation route for the new component.

-## Run the application +## Run the Application -The `start` command will build the application, start a web server and open it in your default browser: +The `start` command builds the application, starts a local web server, and opens it in your default browser: ```cmd ig start @@ -183,30 +206,29 @@ ig start ## AI Assistant Integration (MCP) -Ignite UI CLI ships with a built-in MCP (Model Context Protocol) server. Connect it to GitHub Copilot, Claude, or Cursor and your assistant can query component docs, retrieve API details, and generate accurate Ignite UI code without switching context. +The Ignite UI CLI includes a built-in MCP (Model Context Protocol) server that connects AI coding assistants - GitHub Copilot, Claude, Cursor - to live Ignite UI component documentation and API references. Once configured, your AI assistant can query component APIs, retrieve setup guides, and generate accurate Ignite UI for Angular code without switching context. -To start the MCP server: +Start the MCP server: ```cmd ig mcp ``` ->[!NOTE] -> For full setup instructions, supported clients (VS Code, Claude Desktop, Cursor), and available tools, see [Ignite UI CLI MCP Overview](../how-to/general-how-to-mcp-overview.md). +For client configuration (VS Code, Claude Desktop, Cursor) and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp.md). ## Ignite UI CLI Commands -A full list of the available Ignite UI CLI commands and their usage (like passing flags, etc.), can be found at the [Ignite UI CLI wiki pages](https://github.com/IgniteUI/igniteui-cli/wiki): - -| Command | Alias | Description | -| :-------------------------------------------------------------------- | :---- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server and opens the application in the default browser. | -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory | -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types | -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists the available commands and provides a brief description of what they do. | -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Performs read and write operation on the Ignite UI CLI configuration settings. | -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for information about a given search term | -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When you run the command within a project folder it will list all templates for the project's framework and type, even if you provide different ones. | -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | -| ig version | -v | Shows Ignite UI CLI version installed locally, or globally if local is missing | -| ig mcp | | Starts the Ignite UI MCP server for AI assistant integration, providing component documentation search and API reference tools. | +A complete list of available Ignite UI CLI commands is maintained on the [Ignite UI CLI wiki](https://github.com/IgniteUI/igniteui-cli/wiki): + +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When run inside a project folder, lists templates for the project's framework and type even if different values are provided as arguments. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | +| ig mcp | | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp.md). | From bfef4f5c12c8c5d9cc0b70869cdf1f1db0047c26 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 6 Apr 2026 23:29:54 +0300 Subject: [PATCH 11/21] Revise step-by-step guide for Angular Schematics Updated the step-by-step guide for Ignite UI for Angular Schematics to enhance clarity and detail. Added information on project bootstrapping, template selection, and theming. --- ...-by-step-guide-using-angular-schematics.md | 90 ++++++++++++------- 1 file changed, 58 insertions(+), 32 deletions(-) diff --git a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md index e3a2ee0aeb..18814a22cd 100644 --- a/en/components/general/cli/step-by-step-guide-using-angular-schematics.md +++ b/en/components/general/cli/step-by-step-guide-using-angular-schematics.md @@ -1,78 +1,104 @@ --- title: Step-by-Step Guide Using Ignite UI for Angular Schematics | Ignite UI for Angular | Infragistics -_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. -_keywords: angular cli, ignite ui for angular, infragistics +_description: Step-by-step guide to creating and scaffolding Angular projects using the Ignite UI for Angular Schematics collection. Covers project type selection, template choice, theming, and adding component views. +_keywords: ignite ui for angular, angular schematics, step-by-step, scaffolding, infragistics +last_updated: "2025-04-06" --- + + # Step-by-Step Guide Using Ignite UI for Angular Schematics -If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md). +The Ignite UI for Angular Schematics step-by-step mode is an interactive wizard built into the `@igniteui/angular-schematics` collection. It guides you through project bootstrapping, template selection, and theming, then lets you add component views before finishing. The wizard can be activated for both new project creation and for adding views to an existing project previously created with the [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md). + +The step-by-step mode does not support non-interactive or scripted use - for that, use the direct `ng new` and `ng g` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. -To activate the guide using the Schematics collection run: +To activate the guided wizard, run: ```cmd ng new --collection="@igniteui/angular-schematics" ``` -This will activate the step by step mode and you will be asked a series of questions to help you create your new project. - -> [!Note] -> Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) +## Create a New Project + +The wizard guides you through four configuration steps before scaffolding the project. + +### Step 1: Choose a bootstrapping type + +The first prompt asks whether to bootstrap the application using standalone components or NgModules. + +Step by step prompt: standalone components or NgModules +Standalone components are the Angular 17+ default and are recommended for new projects. Choose NgModules only if you are integrating with an existing NgModule-based codebase. -## Create new project +### Step 2: Enter a project name -First you will be prompted to choose the way your application will be bootstrapped, using modules or standalone components: +Enter a name for the new application. The project is created in a directory with the same name. -Step by step project type +Step by step prompt: enter project name -Then you can enter a name for your application: +### Step 3: Choose a project template -Step by step new project name +Navigate the available project templates using the arrow keys and press ENTER to confirm. Three templates are available: -Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: +- **empty** - a project structure with routing and a home page, no pre-built navigation +- **side-nav** - a project structure with a pre-built side navigation drawer +- **auth** - a side navigation project extended with a basic authentication module (see [Authentication Project Template](auth-template.md) for details) -Step by step new project template +Step by step prompt: choose project template -The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. +### Step 4: Choose a theme -Step by step new project theme +Two theme options are available: -After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: +- **default** - includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular Material-based theme in `angular.json` +- **custom** - generates a color palette and theme configuration using the [Theming API](../../themes.md) in `app/styles.scss`, ready for customization -Step by step new project action +Step by step prompt: choose default or custom theme -## Add view +After completing these four steps, the wizard generates the project structure, initializes a Git repository, and commits the initial state. It then asks whether to finish or continue by adding a component view. -Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. +Step by step prompt: finish or add a view -To activate the the step by step mode using the Schematics collection run the `component`(alias:`c`) schematic: +## Add Component Views + +The Ignite UI for Angular Schematics collection provides individual component templates and more elaborate scenario templates. This mode is available both as a continuation of project creation and as a standalone operation in an existing project. + +To activate the component wizard in an existing project, run the `component` schematic (alias: `c`): ```bash ng g @igniteui/angular-schematics:component ``` -In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. +The wizard displays the available [component templates](component-templates.md#component-templates), grouped by category. Navigate with the arrow keys and press ENTER to select. + +Step by step prompt: template category selection + +Some templates - such as the Custom Grid - expose a list of optional features. Use the SPACE key to toggle individual options before confirming with ENTER. -Step by step template group +Step by step prompt: optional component feature toggles -Use the arrow keys to navigate through the options and ENTER to choose the selected one. +Scenario templates are also available and provide more complete application views that combine multiple components. Select "Scenarios" in the category list to browse them. -For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: +Step by step prompt: scenario template selection -Step by step component features +After adding a template, the wizard asks whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is served and opened in your default browser. -If you choose to add a scenario to your application you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): +To add more Ignite UI for Angular views to a project later without the wizard, use the direct schematic command: + +```cmd +ng g @igniteui/angular-schematics:c [template] [name] +``` -Scenario templates +## AI Assistant Integration -After adding a template to your application, you will be asked whether you want to complete the process or to proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. +The Ignite UI CLI - which shares the same scaffolding toolchain as these Schematics - includes a built-in MCP server that connects AI coding assistants to live Ignite UI component documentation. If your workflow uses the Ignite UI CLI alongside the Angular CLI, start the server with `ig mcp` after installing the CLI globally. -You can always add more Ignite UI for Angular views to your application later using the `ng g @igniteui/angular-schematics:c [template] [name]` command. +For MCP client configuration and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp.md). From 9a3d83c4c72fd6e5b84b645279df33824c7d42ea Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Mon, 6 Apr 2026 23:41:42 +0300 Subject: [PATCH 12/21] Update CLI documentation for project templates and commands tables are now MD060-compliant --- .../general/cli/getting-started-with-cli.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index 99269cbedc..b96b06730d 100644 --- a/en/components/general/cli/getting-started-with-cli.md +++ b/en/components/general/cli/getting-started-with-cli.md @@ -76,10 +76,10 @@ ig new --framework=angular --type=igx-ts --template=side-nav The new application is created in a directory named after the project. The following project templates are available for Angular: -| Template ID | Description | -| :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with a side navigation drawer | +| Template ID | Description | +| :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with a side navigation drawer | | side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template.md) for details. | The following arguments are available when creating a project: @@ -220,15 +220,15 @@ For client configuration (VS Code, Claude Desktop, Cursor) and a full descriptio A complete list of available Ignite UI CLI commands is maintained on the [Ignite UI CLI wiki](https://github.com/IgniteUI/igniteui-cli/wiki): -| Command | Alias | Description | -| :-------------------------------------------------------------------- | :---- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | -| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | -| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | -| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | -| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | -| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | -| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When run inside a project folder, lists templates for the project's framework and type even if different values are provided as arguments. | -| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | -| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | -| ig mcp | | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp.md). | +| Command | Alias | Description | +| :-------------------------------------------------------------------- | :---- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [ig start](https://github.com/IgniteUI/igniteui-cli/wiki/start) | | Builds the application, starts a web server, and opens it in the default browser. | +| [ig build](https://github.com/IgniteUI/igniteui-cli/wiki/build) | | Builds the application into an output directory. | +| [ig generate](https://github.com/IgniteUI/igniteui-cli/wiki/generate) | g | Generates a new custom template for supported frameworks and project types. | +| [ig help](https://github.com/IgniteUI/igniteui-cli/wiki/help) | -h | Lists available commands with brief descriptions. | +| [ig config](https://github.com/IgniteUI/igniteui-cli/wiki/config) | | Reads and writes Ignite UI CLI configuration settings. | +| [ig doc](https://github.com/IgniteUI/igniteui-cli/wiki/doc) | | Searches the Infragistics knowledge base for a given term. | +| [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l | Lists all templates for the specified framework and type. When run inside a project folder, lists templates for the project's framework and type even if different values are provided as arguments. | +| [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) | | Executes the tests for the current project. | +| ig version | -v | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found. | +| ig mcp | | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp.md). | From ce588cd2fffbb0c97e17a921f0ab3a4b1723a1fe Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Tue, 7 Apr 2026 13:15:49 +0300 Subject: [PATCH 13/21] fix: md links --- en/components/general/angular-grid-overview-guide.md | 2 +- .../general/cli/getting-started-with-angular-schematics.md | 2 +- en/components/general/cli/step-by-step-guide-using-cli.md | 2 +- en/components/general/ignite-ui-licensing.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/en/components/general/angular-grid-overview-guide.md b/en/components/general/angular-grid-overview-guide.md index c806a0dc71..c61f00205a 100644 --- a/en/components/general/angular-grid-overview-guide.md +++ b/en/components/general/angular-grid-overview-guide.md @@ -25,7 +25,7 @@ You can install Ignite UI for Angular with either the Angular CLI or with the [I `ng add igniteui-angular` -This is the preferred option when you need to add Ignite UI for Angular to an [existing Angular application](getting-started.md#installing-ignite-ui-for-angular). +This is the preferred option when you need to add Ignite UI for Angular to an [existing Angular application](getting-started.md#install-ignite-ui-for-angular). If you’re creating a new application from scratch, we recommend the following approach: diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index 7adc099435..c258fb84de 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -128,7 +128,7 @@ Additionally, you can specify **arguments** to control the theme or skip package ## Add template -To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#installing-ignite-ui-for-angular). +To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#install-ignite-ui-for-angular). With Schematics, use `ng generate` with the Ignite UI for Angular collection and `component [template] [name]`: diff --git a/en/components/general/cli/step-by-step-guide-using-cli.md b/en/components/general/cli/step-by-step-guide-using-cli.md index c2cbd8d1de..f82ce31be8 100644 --- a/en/components/general/cli/step-by-step-guide-using-cli.md +++ b/en/components/general/cli/step-by-step-guide-using-cli.md @@ -80,5 +80,5 @@ If you choose to add a scenario to your application, you will also get a list of After adding a template to your application, you will be asked whether you want to complete the process or proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. -You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-template) command with the following syntax: +You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-a-component-template) command with the following syntax: `ig add [template] [name]`. diff --git a/en/components/general/ignite-ui-licensing.md b/en/components/general/ignite-ui-licensing.md index 3ea9d4346a..89f764ca46 100644 --- a/en/components/general/ignite-ui-licensing.md +++ b/en/components/general/ignite-ui-licensing.md @@ -39,7 +39,7 @@ Infragistics Ignite UI for Angular is available as an npm package and you can ad The Infragistics Ignite UI Dock Manager Web Component is available as a separate npm package and by installing it you will start using the [Ignite UI Dock Manager Web Component Trial version](https://www.infragistics.com/products/ignite-ui-angular) of the product. -> More information on how to start using the Ignite UI for Angular npm package can be found in [this topic](getting-started.md#installing-ignite-ui-for-angular). Additional information on Ignite UI Dock Manager Web Component can be found in the [Dock Manager documentation](../dock-manager.md). +> More information on how to start using the Ignite UI for Angular npm package can be found in [this topic](getting-started.md#install-ignite-ui-for-angular). Additional information on Ignite UI Dock Manager Web Component can be found in the [Dock Manager documentation](../dock-manager.md). ### Upgrading packages using our Angular Schematics or Ignite UI CLI From 42476e00b67337e9188ea766666b6cec4a690fd9 Mon Sep 17 00:00:00 2001 From: Ivaylo Barakov Date: Tue, 7 Apr 2026 16:37:45 +0300 Subject: [PATCH 14/21] Apply suggestions from code review Co-authored-by: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> --- en/components/general/cli/component-templates.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index e17ab222c7..16083a929f 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -1,12 +1,14 @@ --- title: Component and Scenario CLI Templates | Ignite UI for Angular | Infragistics -_description: Check out the list of all available CLI templates with Ignite UI for Angular framework +_description: Reference list of all Ignite UI for Angular component and scenario templates available via Ignite UI CLI and Angular Schematics, with commands and live demo links. _keywords: igniteui for angular | angular schematics | templates | infragistics --- # Component Templates -The following table provides a list of the Ignite UI Angular components that can be generated using the Ignite UI Angular Schematics or Ignite UI CLI commands. In addition you can find links to the available demos in our documentation, but note that those are not exactly identical to the ones generated by the CLI. +Component templates are pre-configured Angular component scaffolds that the Ignite UI CLI (`ig add`) and Ignite UI Angular Schematics (`ng g @igniteui/angular-schematics:c`) generate into an existing Angular project. Each template produces a working Angular component with the correct imports, module declarations, and a sample dataset - ready to run without additional configuration. Templates are available for grids, charts, gauges, maps, layout components, data entry controls, and full application scenarios. + +These templates generate components into an existing Angular workspace only. They do not create a new Angular project - use `ig new` or `ng new` for that. Templates are specific to Ignite UI for Angular; equivalent patterns for React, Web Components, and Blazor are covered in the respective framework documentation. The generated code serves as a functional starting point and may differ from the live demos linked in this page, which reflect the full documentation samples. | Template | Code and description | Demo | | :-------------------------------| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -59,7 +61,9 @@ The following table provides a list of the Ignite UI Angular components that can | calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | -## Scenario templates +## Scenario Templates + +Scenario templates scaffold complete application views that combine multiple Ignite UI for Angular components into a working use-case pattern. Use these when you need a production-realistic starting point rather than a single isolated component. | Template | Code and description | Demo | | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | From a7fff010b8dcb84471e9ace93e0cbde8d4f780e5 Mon Sep 17 00:00:00 2001 From: onlyexeption Date: Tue, 7 Apr 2026 16:42:12 +0300 Subject: [PATCH 15/21] fix: calendar tag name --- en/components/general/cli/component-templates.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 16083a929f..85f56a81f4 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -58,7 +58,7 @@ These templates generate components into an existing Angular workspace only. The | Scheduling | | | | date-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c date-picker newDatePicker
Ignite UI CLI:
ig add date-picker newDatePicker
Basic IgxDatePicker.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | | time-picker | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c time-picker newTimePicker
Ignite UI CLI:
ig add time-picker newTimePicker
Basic IgxTimePicker.
| Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding. | -| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
| Basic [IgxDatePicker](../../date-picker.md) with one-way data binding. | +| calendar | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
| Basic [IgxCalendar](../../calendar.md) with single selection. | ## Scenario Templates From c836117b92a5bb88da163e0990b9fc7ced970128 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:04:49 +0300 Subject: [PATCH 16/21] Revise documentation for Angular Schematics setup Updated the documentation for Ignite UI for Angular Schematics, enhancing the description and keywords, and refining installation and usage instructions. --- ...getting-started-with-angular-schematics.md | 172 +++++++++--------- 1 file changed, 88 insertions(+), 84 deletions(-) diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index c258fb84de..d9e7eff62b 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -1,61 +1,78 @@ --- title: Getting Started with Ignite UI for Angular Schematics | Ignite UI for Angular | Infragistics -_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. -_keywords: angular cli, ignite ui for angular, infragistics +_description: Install the Ignite UI for Angular Schematics collection and use it to scaffold Angular projects, add component views, and run a development server within the native Angular CLI workflow. +_keywords: ignite ui for angular, angular schematics, angular cli, scaffolding, getting started, infragistics +last_updated: "2025-04-08" --- - -## Getting Started with Ignite UI for Angular Schematics - -To get started install [Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) globally: - + + + +# Getting Started with Ignite UI for Angular Schematics + +The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project. + +The Schematics collection does not include an MCP server for AI assistant integration - for that, install the [Ignite UI CLI](getting-started-with-cli.md) alongside your Angular CLI project. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.md). + +## Install the Schematics Collection + +Install `@igniteui/angular-schematics` globally using npm: + ```cmd npm i -g @igniteui/angular-schematics ``` - -The above install will make the schematics available to use a collection parameter for the `ng new` command. - -If you are using `yarn` package manager: - + +Or, using yarn: + ```cmd yarn global add @igniteui/angular-schematics ``` - -### Using guided experience - -The shortest and easiest way to bootstrap an application is to use the [step by step guide using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). - -To activate the guide using the Ignite UI for Angular Schematics run: - + +After a global install, the collection is available as the `--collection` argument to `ng new`. If you already have an Angular project and want to add Ignite UI for Angular without scaffolding a new one, use: + +```cmd +ng add igniteui-angular +``` + +This installs the `igniteui-angular` package, registers the `@igniteui/angular-schematics` collection, and configures dependencies, styles, and theme imports automatically. + +## Create a New Project + +The Schematics collection provides two modes for project creation: a guided interactive wizard and a direct `ng new` command with explicit arguments. + +### Use the guided wizard + +The guided wizard is the recommended starting point for new projects. Activate it with: + ```cmd ng new --collection="@igniteui/angular-schematics" ``` - -## Create a new project - -To create an application that is configured to use the Ignite UI for Angular controls, run the `ng new` command providing `@igniteui/angular-schematics` to the collection option. - + +For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). + +### Create a project directly + +To create an Angular project non-interactively, provide the collection and template arguments to `ng new`: + ```cmd ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav ``` - -Additionally, by setting the `type` of the project, like so `--type=igx-ts-legacy`, you can specify that you prefer your project to be generated using module based bootstrapping. Not specifying it will default to a project that uses standalone components. - -If you already have an Angular project, created without providing the `@igniteui/angular-schematics` collection as described above, you can add the Ignite UI for Angular product, using the following command: - + +By default, the project uses standalone components. To use NgModule-based bootstrapping instead, add `--type=igx-ts-legacy`: + ```cmd -ng add igniteui-angular +ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy ``` - -The new application is created in a directory with the same name (`newAngularProject`). There are several project templates from which you can choose when creating an Ignite UI for Angular application: - -| template id | template description | -| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| empty | Project structure with routing and a home page | -| side-nav | Project structure with side navigation drawer | -| side-nav-auth | Side navigation project extended with user authentication module.
[Angular Authentication Project Template](auth-template.md) topic covers the project template in detail. | - -Additionally, you can specify **arguments** to control the theme or skip packages install: - + +The project is created in a directory named after the project. The following project templates are available: + +| Template ID | Description | +| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------ | +| empty | Project structure with routing and a home page | +| side-nav | Project structure with a side navigation drawer | +| side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template.md) for details. | + +The following arguments are available when creating a project: +
name

@@ -65,27 +82,17 @@ Additionally, you can specify **arguments** to control the theme or skip package The name of the application. The application is created inside a directory with the same name.

- +
- framework (Ignite UI CLI only) -

- --framework (alias: -f) default value: "jquery" -

-

- Framework to setup project for. The supported frameworks are jQuery, Angular and React. -

-
- -
- type (Ignite UI CLI only) + type

--type (alias: -t)

- The available project types depend on the selected framework. + The project bootstrapping type. Use igx-ts-legacy for NgModule-based bootstrapping. Omit to default to standalone components.

- +
theme

@@ -95,80 +102,77 @@ Additionally, you can specify **arguments** to control the theme or skip package Project theme (depends on project type).

- +
skip-git

--skip-git (alias: --sg)

- When this option is used, the automatic repository initialization with Git will be skipped. If the option is omitted, then the global skip-git configuration property is used. + Skips automatic Git repository initialization. If omitted, the global skip-git configuration property is used.

- +
skip-install

--skip-install (alias: --si)

- The new command will install package dependencies on project creation. Passing this flag will skip the initial installation. + Skips the initial npm package installation on project creation.

- +
template

--template

- Use this option if there are different project templates for a specific framework type. - Currently this option is available only for Ignite UI for Angular igx-ts project types.

+ Specifies the project template. Currently available for Ignite UI for Angular igx-ts project types. +

- -## Add template - -To add one of the [available Ignite UI Angular templates](component-templates.md) you need to provide template ID and a name for the new component or use the [Step-by-Step Guide](step-by-step-guide-using-cli.md#add-view). Their usage is supported only inside existing projects created with the Angular Schematics, Ignite UI CLI or where Ignite UI for Angular has been [installed using `ng add`](../getting-started.md#install-ignite-ui-for-angular). - -With Schematics, use `ng generate` with the Ignite UI for Angular collection and `component [template] [name]`: - + +## Add a Component Template + +To add an [available Ignite UI for Angular template](component-templates.md) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component: + ```cmd ng g @igniteui/angular-schematics:component grid newGrid ``` - -List of all the [available templates](component-templates.md). - -Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: - + +Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md#add-component-views). + +The following arguments are available when adding a template: +
module

--module (alias: -m)

- note: module argument is applicable only in Angular projects. + Applicable only in Angular projects.

- Path to the module.ts file, relative to the /src/app/ folder, for the module where the new component should be registered: + Path to the module.ts file, relative to /src/app/, where the new component should be registered:

ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts -
- +
skip-route

--skip-route (alias: -srk)

- Don't auto-generate an app navigation route for the new component + Skips auto-generation of an app navigation route for the new component.

- -## Run the application - -The `start` schematic will build the application, start a web server and open it in your default browser. - + +## Run the Application + +The `start` schematic builds the application, starts a local web server, and opens it in your default browser: + ```cmd ng g @igniteui/angular-schematics:start ``` From b890ae908b81db400a75f25d31e506dcdf2db21b Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:05:54 +0300 Subject: [PATCH 17/21] Revise step-by-step guide for Ignite UI CLI Updated the step-by-step guide for Ignite UI CLI to enhance clarity and detail, including improved descriptions and instructions. --- .../cli/step-by-step-guide-using-cli.md | 74 +++++++++---------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/en/components/general/cli/step-by-step-guide-using-cli.md b/en/components/general/cli/step-by-step-guide-using-cli.md index f82ce31be8..782e91b7fd 100644 --- a/en/components/general/cli/step-by-step-guide-using-cli.md +++ b/en/components/general/cli/step-by-step-guide-using-cli.md @@ -1,84 +1,84 @@ --- -title: Step-by-Step Guide Using Ignite UI CLI| Ignite UI for Angular | Infragistics -_description: The Step-by-Step mode contains guided experience through the Ignite UI CLI options. -_keywords: angular cli, ignite ui for angular, infragistics +title: Step-by-Step Guide Using Ignite UI CLI | Ignite UI for Angular | Infragistics +_description: Walk through the Ignite UI CLI interactive wizard to create a new Angular project, choose a template and theme, and add Ignite UI for Angular component views. +_keywords: ignite ui cli, ignite ui for angular, angular scaffolding, step-by-step, infragistics +last_updated: "2025-04-08" --- -# Step-by-Step Guide using Ignite UI CLI + -If you want to get a guided experience through the available options, you can initialize the step by step mode that will help you create and setup your new application, as well as update project previously created with the [Ignite UI CLI](getting-started-with-cli.md). +# Step-by-Step Guide Using Ignite UI CLI -To start the guide using the Ignite UI CLI, simply run the `ig` command: +The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for [Ignite UI CLI](getting-started-with-cli.md)-based Angular projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront. + +The step-by-step mode does not support scripted or non-interactive use - for that, use the direct `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. + +To activate the wizard, run: ```bash ig ``` -or +or: ```bash ig new ``` -This will activate the step by step mode and you will be asked a series of questions to help you create your new project. -
- - Play video + Play video: Building Your First Ignite UI CLI App +

Building Your First Ignite UI CLI App

-> [!Note] -> Step by step mode relies on `Inquirer.js`, see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) - - ## Create new project First you will be prompted to enter a name for your application: -![Step by step new project name](../../../images/general/ig-step-by-step-new-project-name.png) +![Step by step new project name prompt](../../../images/general/ig-step-by-step-new-project-name.png) -After selecting `Angular` as a framework, you will be prompted to choose the type of the project that is to be generated: -Step by step project type +After selecting `Angular` as a framework, you will be prompted to choose the type of the project to be generated: -Then you will be guided to choose one of the available project templates. You can create an empty project, project with side navigation or [authentication project](auth-template.md) with basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: +Step by step project type selection -![Step by step new project template](../../../images/general/ig-step-by-step-new-project-template.png) +Then you will be guided to choose one of the available project templates. You can create an empty project, a project with side navigation, or an [authentication project](auth-template.md) with a basic authentication module. Navigate through the available options using the arrow keys and press ENTER to confirm the selection: -The next step is to choose a theme for your application. If you select the default option a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme is included in your project's `angular.json`. The custom option generates code for a color palette and theme with our [Theming API](../../themes.md) in the `app/styles.scss`. +![Step by step new project template selection](../../../images/general/ig-step-by-step-new-project-template.png) -![Step by step new project theme](../../../images/general/ig-step-by-step-new-project-theme.png) +The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes.md) in `app/styles.scss`. -After completing the above steps the application structure will be generated, git repository will be initialized and the project will be committed. Then you will be asked if you want to complete the process or to add a new view to your application: +![Step by step new project theme selection](../../../images/general/ig-step-by-step-new-project-theme.png) -![Step by step new project action](../../../images/general/ig-step-by-step-new-project-action.png) +After completing the above steps, the application structure is generated, a Git repository is initialized, and the project is committed. You will then be asked whether to complete the process or add a new view to your application: -## Add view +![Step by step new project action prompt](../../../images/general/ig-step-by-step-new-project-action.png) -Ignite UI CLI supports multiple component templates, as well as some more elaborated scenario templates, that can be added to a project. This mode can be activated either after completing project creation or inside an existing project using the commands below. +## Add view -When using Ignite UI CLI, run the `add` command: +The Ignite UI CLI supports multiple component templates and scenario templates that can be added to a project. This mode can be activated either as a continuation of project creation or inside an existing project using the command below. ```bash ig add ``` -In case you choose to add a new control, you will be provided with a [list of the available templates](component-templates.md#component-templates), grouped in categories. - -![Step by step template group](../../../images/general/ig-step-by-step-template-group.png) +You will be provided with a [list of the available templates](component-templates.md#component-templates), grouped by category. -Use the arrow keys to navigate through the options and ENTER to choose the selected one. +![Step by step template group selection](../../../images/general/ig-step-by-step-template-group.png) -For some templates, like `Custom Grid`, for example you will be provided with a list of options that you might enable. Options can be toggled with the SPACE key: +Use the arrow keys to navigate through the options and ENTER to select. For some templates, such as `Custom Grid`, you will be provided with a list of optional features that can be toggled with the SPACE key: -![Step by step component features](../../../images/general/ig-step-by-step-component-features.png) +![Step by step component feature toggles](../../../images/general/ig-step-by-step-component-features.png) If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates.md#scenario-templates): -Scenario templates +Step by step scenario template selection + +After adding a template, you will be asked whether to add more views or complete the process. On completion, any remaining package dependencies are installed and the application is served and opened in your default browser. -After adding a template to your application, you will be asked whether you want to complete the process or proceed with adding more controls. When you choose to complete the process, the required packages will be installed (on project creation) and the application will be served and opened in your default browser. +To add more Ignite UI for Angular views to a project later without the wizard, use the direct `add` command: -You can always add more Ignite UI for Angular views to your application at a later moment using the [`add`](getting-started-with-cli.md#add-a-component-template) command with the following syntax: -`ig add [template] [name]`. +```bash +ig add [template] [name] +``` From 9dda24e5c2517a4f04a8ce6274be1b4997bbe615 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:13:58 +0300 Subject: [PATCH 18/21] Update component templates and add new scenarios Fix for lint errors --- en/components/general/cli/component-templates.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 85f56a81f4..39299330e1 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -1,13 +1,16 @@ --- title: Component and Scenario CLI Templates | Ignite UI for Angular | Infragistics _description: Reference list of all Ignite UI for Angular component and scenario templates available via Ignite UI CLI and Angular Schematics, with commands and live demo links. -_keywords: igniteui for angular | angular schematics | templates | infragistics +_keywords: igniteui for angular, angular schematics, templates, infragistics +last_updated: "2025-04-08" --- + + # Component Templates Component templates are pre-configured Angular component scaffolds that the Ignite UI CLI (`ig add`) and Ignite UI Angular Schematics (`ng g @igniteui/angular-schematics:c`) generate into an existing Angular project. Each template produces a working Angular component with the correct imports, module declarations, and a sample dataset - ready to run without additional configuration. Templates are available for grids, charts, gauges, maps, layout components, data entry controls, and full application scenarios. - + These templates generate components into an existing Angular workspace only. They do not create a new Angular project - use `ig new` or `ng new` for that. Templates are specific to Ignite UI for Angular; equivalent patterns for React, Web Components, and Blazor are covered in the respective framework documentation. The generated code serves as a functional starting point and may differ from the live demos linked in this page, which reflect the full documentation samples. | Template | Code and description | Demo | @@ -46,7 +49,7 @@ These templates generate components into an existing Angular workspace only. The | Data Entry & Display | | | | chip | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c chip newChip
Ignite UI CLI:
ig add chip newChip
Basic IgxChip.
| [IgxChip](../../chip.md) components inside igx-chips-area. | | dropdown | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c dropdown newDropDown
Ignite UI CLI:
ig add dropdown newDropDown
Basic IgxDropDown.
| Basic [IgxDropDown](../../drop-down.md) that displays a list of items. | -| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelect
Basic IgxSelect.
| Simple [IgxSelect](../../select.md) that displays a list of items.. | +| select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select newSelect
Ignite UI CLI:
ig add select newSelect
Basic IgxSelect.
| Simple [IgxSelect](../../select.md) that displays a list of items. | | select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-groups newGroupsSelect
Ignite UI CLI:
ig add select-groups newGroupsSelect
Select With Groups.
| [IgxSelect](../../select.md) displaying grouped items. | | select (v4.1.0) | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c select-in-form newFormSelect
Ignite UI CLI:
ig add select-in-form newFormSelect
IgxSelect in a form.
| [IgxSelect](../../select.md) component usage in a form. | | input group | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c input-group newInputGroup
Ignite UI CLI:
ig add input-group newInputGroup
Basic IgxInputGroup form view.
| Form view created with [IgxInputGroup](../../input-group.md). | @@ -62,14 +65,14 @@ These templates generate components into an existing Angular workspace only. The ## Scenario Templates - + Scenario templates scaffold complete application views that combine multiple Ignite UI for Angular components into a working use-case pattern. Use these when you need a production-realistic starting point rather than a single isolated component. -| Template | Code and description | Demo | +| Template | Code and description | Demo | | :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | | awesome-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid
IgxGrid with custom cell templating.
| [IgxGrid](../../grid/grid.md) with cell templating and controls embedded into the cells. | | crm-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid
IgxGrid with custom search implementation.
| [IgxGrid](../../grid/grid.md) with custom search implementation. | | fintech-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid
IgxGrid handling thousands of live updates per second.
| [IgxGrid](../../grid/live-data.md) Live Updating demo handling thousands of updates per second. | | fintech-tree-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid
IgxGrid handling thousands of live updates per second.
| [IgxTreeGrid](../../treegrid/live-data.md) Live Updating demo handling thousands of updates per second. | -| login | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
Registration and login forms created with IgxInputGroup.
| Registration and login forms created with [IgxInputGroup](../../input-group.md).. | +| login | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
Registration and login forms created with IgxInputGroup.
| Registration and login forms created with [IgxInputGroup](../../input-group.md). | | weather-forecast | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast
Template with igxExpansionPanel.
| The template uses the [IgxExpansionPanel](../../expansion-panel.md) to display daily weather forecast details. | From ea3057c7a9e2fb9c988f1f7252bf70f7e2ce6070 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:15:19 +0300 Subject: [PATCH 19/21] Revise getting started guide for Angular Schematics Update the getting started guide for Ignite UI for Angular Schematics with new installation and project creation instructions. --- ...getting-started-with-angular-schematics.md | 84 +++++++++---------- 1 file changed, 42 insertions(+), 42 deletions(-) diff --git a/en/components/general/cli/getting-started-with-angular-schematics.md b/en/components/general/cli/getting-started-with-angular-schematics.md index d9e7eff62b..09127d9f57 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -4,75 +4,75 @@ _description: Install the Ignite UI for Angular Schematics collection and use it _keywords: ignite ui for angular, angular schematics, angular cli, scaffolding, getting started, infragistics last_updated: "2025-04-08" --- - + - + # Getting Started with Ignite UI for Angular Schematics - + The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project. - + The Schematics collection does not include an MCP server for AI assistant integration - for that, install the [Ignite UI CLI](getting-started-with-cli.md) alongside your Angular CLI project. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.md). - + ## Install the Schematics Collection - + Install `@igniteui/angular-schematics` globally using npm: - + ```cmd npm i -g @igniteui/angular-schematics ``` - + Or, using yarn: - + ```cmd yarn global add @igniteui/angular-schematics ``` - + After a global install, the collection is available as the `--collection` argument to `ng new`. If you already have an Angular project and want to add Ignite UI for Angular without scaffolding a new one, use: - + ```cmd ng add igniteui-angular ``` - + This installs the `igniteui-angular` package, registers the `@igniteui/angular-schematics` collection, and configures dependencies, styles, and theme imports automatically. - + ## Create a New Project - + The Schematics collection provides two modes for project creation: a guided interactive wizard and a direct `ng new` command with explicit arguments. - + ### Use the guided wizard - + The guided wizard is the recommended starting point for new projects. Activate it with: - + ```cmd ng new --collection="@igniteui/angular-schematics" ``` - + For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md). - + ### Create a project directly - + To create an Angular project non-interactively, provide the collection and template arguments to `ng new`: - + ```cmd ng new newAngularProject --collection="@igniteui/angular-schematics" --template=side-nav ``` - + By default, the project uses standalone components. To use NgModule-based bootstrapping instead, add `--type=igx-ts-legacy`: - + ```cmd ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-ts-legacy ``` - + The project is created in a directory named after the project. The following project templates are available: - + | Template ID | Description | | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------ | | empty | Project structure with routing and a home page | | side-nav | Project structure with a side navigation drawer | | side-nav-auth | Side navigation project extended with a user authentication module. See [Angular Authentication Project Template](auth-template.md) for details. | - + The following arguments are available when creating a project: - +
name

@@ -82,7 +82,7 @@ The following arguments are available when creating a project: The name of the application. The application is created inside a directory with the same name.

- +
type

@@ -92,7 +92,7 @@ The following arguments are available when creating a project: The project bootstrapping type. Use igx-ts-legacy for NgModule-based bootstrapping. Omit to default to standalone components.

- +
theme

@@ -102,7 +102,7 @@ The following arguments are available when creating a project: Project theme (depends on project type).

- +
skip-git

@@ -112,7 +112,7 @@ The following arguments are available when creating a project: Skips automatic Git repository initialization. If omitted, the global skip-git configuration property is used.

- +
skip-install

@@ -122,7 +122,7 @@ The following arguments are available when creating a project: Skips the initial npm package installation on project creation.

- +
template

@@ -132,19 +132,19 @@ The following arguments are available when creating a project: Specifies the project template. Currently available for Ignite UI for Angular igx-ts project types.

- + ## Add a Component Template - + To add an [available Ignite UI for Angular template](component-templates.md) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component: - + ```cmd ng g @igniteui/angular-schematics:component grid newGrid ``` - + Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics.md#add-component-views). - + The following arguments are available when adding a template: - +
module

@@ -158,7 +158,7 @@ The following arguments are available when adding a template:

ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts
- +
skip-route

@@ -168,11 +168,11 @@ The following arguments are available when adding a template: Skips auto-generation of an app navigation route for the new component.

- + ## Run the Application - + The `start` schematic builds the application, starts a local web server, and opens it in your default browser: - + ```cmd ng g @igniteui/angular-schematics:start ``` From c1a3fb2dbccf395822353c6cae1f49dc47be3405 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:15:59 +0300 Subject: [PATCH 20/21] Add newline at end of step-by-step guide Fix formatting by adding a newline at the end of the file. From 7ebc82243c6c568029bc3a0958b84c32ef62d2c8 Mon Sep 17 00:00:00 2001 From: Radoslav Mirchev <52001020+radomirchev@users.noreply.github.com> Date: Wed, 8 Apr 2026 01:24:17 +0300 Subject: [PATCH 21/21] Simplify scenario template descriptions Removed detailed descriptions from scenario templates for brevity. --- en/components/general/cli/component-templates.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 39299330e1..65142e77c9 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -68,11 +68,11 @@ These templates generate components into an existing Angular workspace only. The Scenario templates scaffold complete application views that combine multiple Ignite UI for Angular components into a working use-case pattern. Use these when you need a production-realistic starting point rather than a single isolated component. -| Template | Code and description | Demo | -| :---------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | -| awesome-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid
IgxGrid with custom cell templating.
| [IgxGrid](../../grid/grid.md) with cell templating and controls embedded into the cells. | -| crm-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid
IgxGrid with custom search implementation.
| [IgxGrid](../../grid/grid.md) with custom search implementation. | -| fintech-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid
IgxGrid handling thousands of live updates per second.
| [IgxGrid](../../grid/live-data.md) Live Updating demo handling thousands of updates per second. | -| fintech-tree-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid
IgxGrid handling thousands of live updates per second.
| [IgxTreeGrid](../../treegrid/live-data.md) Live Updating demo handling thousands of updates per second. | -| login | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
Registration and login forms created with IgxInputGroup.
| Registration and login forms created with [IgxInputGroup](../../input-group.md). | -| weather-forecast | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast
Template with igxExpansionPanel.
| The template uses the [IgxExpansionPanel](../../expansion-panel.md) to display daily weather forecast details. | +| Template | Code and description | +| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| awesome-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid | +| crm-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid | +| fintech-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid | +| fintech-tree-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid | +| login | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin | +| weather-forecast | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast |