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-overview.md b/en/components/general/cli-overview.md index 9991aa295d..326f91bba8 100644 --- a/en/components/general/cli-overview.md +++ b/en/components/general/cli-overview.md @@ -1,15 +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 for Angular Schematics + +[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. + +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 - 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. -[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. +Start the MCP server with: -[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. +```cmd +ig mcp +``` -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). +For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.md). diff --git a/en/components/general/cli/component-templates.md b/en/components/general/cli/component-templates.md index 246a4509c2..65142e77c9 100644 --- a/en/components/general/cli/component-templates.md +++ b/en/components/general/cli/component-templates.md @@ -1,59 +1,78 @@ --- 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 -_keywords: igniteui for angular | angular schematics | templates | 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 +last_updated: "2025-04-08" --- + + # 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. - -| Template | Code and description | Demo | -| :-------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Grids & Lists | | | -| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGrid
Basic template for IgxGrid.
| [IgxGrid](../../grid/grid.md) component with auto generated columns | -| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditing
Sample IgxGrid with batch editing.
| [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) | -| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGrid
IgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) | -| 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) | -| 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 | | | -| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChart
Basic category chart with chart type selector.
| Basic [category chart](../../charts/types/column-chart.md) with chart type selector. | -| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChart
Basic financial chart with automatic toolbar and type selection.
| Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. | -| Gauges | | | -| 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. | -| 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. | -| 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-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). | -| 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). | -| 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. | - - -## Scenario templates - -| 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. | +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 | +| :-------------------------------| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Grids & Lists | | | +| grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid newGrid
Ignite UI CLI:
ig add grid newGrid
Basic template for IgxGrid.
| [IgxGrid](../../grid/grid.md) component with auto generated columns | +| grid-batch-editing | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing
Ignite UI CLI:
ig add grid-batch-editing newGridBatchEditing
Sample IgxGrid with batch editing.
| [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md) | +| custom-grid | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c custom-grid newCustomGrid
Ignite UI CLI:
ig add custom-grid newCustomGrid
IgxGrid with optional features like sorting, filtering, editing, etc.
| [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md) | +| 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 | | | +| category chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c category-chart newCategoryChart
Ignite UI CLI:
ig add category-chart newCategoryChart
Basic category chart with chart type selector.
| Basic [category chart](../../charts/types/column-chart.md) with chart type selector. | +| financial chart | Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c financial-chart newFinancialChart
Ignite UI CLI:
ig add financial-chart newFinancialChart
Basic financial chart with automatic toolbar and type selection.
| Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection. | +| Gauges | | | +| 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. | +| 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). | +| 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). | +| 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 [IgxCalendar](../../calendar.md) with single selection. | + + +## 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 | +| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 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 | 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..09127d9f57 100644 --- a/en/components/general/cli/getting-started-with-angular-schematics.md +++ b/en/components/general/cli/getting-started-with-angular-schematics.md @@ -1,60 +1,77 @@ --- 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 +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. -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). +### Use the guided wizard -To activate the guide using the Ignite UI for Angular Schematics run: +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 +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). -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. +### 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: +The project is created in a directory named after the project. The following project templates are available: -| 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 @@ -67,22 +84,12 @@ Additionally, you can specify **arguments** to control the theme or skip package
- 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.

@@ -102,7 +109,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.

@@ -112,7 +119,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.

@@ -122,23 +129,21 @@ 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. 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#installing-ignite-ui-for-angular). +## Add a Component Template -With Schematics, use `ng generate` with the Ignite UI for Angular collection and `component [template] [name]`: +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). +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). -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 @@ -146,13 +151,12 @@ 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:

ng g @igniteui/angular-schematics:component combo newCombo --module=myModule/myModule.module.ts -
@@ -161,13 +165,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` schematic will build the application, start a web server and open it in your default browser. +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 diff --git a/en/components/general/cli/getting-started-with-cli.md b/en/components/general/cli/getting-started-with-cli.md index bc19bf52fd..b96b06730d 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. + +### Use the guided wizard -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). +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 guide using the Ignite UI CLI run: +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). -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: +### Create a project directly + +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: -Additionally, you can specify the module in which the component will be registered or skip the auto-generation of app navigation route: +```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). + +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,30 +192,43 @@ 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 ``` +## AI Assistant Integration (MCP) + +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. + +Start the MCP server: + +```cmd +ig mcp +``` + +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 | +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). | 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..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. -
- Play video + Play video: 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 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 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. +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 at latter moment 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). 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..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-template) command with the following syntax: -`ig add [template] [name]`. +```bash +ig add [template] [name] +``` diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md index bfcfd32293..9491b9ae50 100644 --- a/en/components/general/getting-started.md +++ b/en/components/general/getting-started.md @@ -1,170 +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. +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). -
-
- NodeJS - - DOWNLOAD NODE - -
-
- Visual Studio Code - - DOWNLOAD VS CODE - -
-
-
+## Prerequisites -## Installing Ignite UI for Angular +- 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 -Ignite UI for Angular can be installed either with the Angular CLI or with the Ignite UI CLI. +## Install Ignite UI for Angular -### Quick Start with the Angular CLI +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. -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. +### Install with Ignite UI CLI -To create an Angular application with the Angular CLI, open your preferred terminal and type in the following command: +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 -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: +Activate the guided project wizard: ```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 - -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 non-interactively: ```cmd -ng add igniteui-grid-lite +ig new --framework=angular --type=igx-ts --template=side-nav ``` -- Dock Manager - Premium - -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. - -```cmd -ng add igniteui-dockmanager -``` +> [!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`. - +> [!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). -### Upgrading from Trial to Licensed +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). -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). +### Install with Angular Schematics -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: +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: -```bash -ng g @igniteui/angular-schematics:upgrade-packages +```cmd +npm i -g @igniteui/angular-schematics ``` -or if using `igniteui-cli`: +Activate the guided wizard: -```bash -ig upgrade-packages +```cmd +ng new --collection="@igniteui/angular-schematics" ``` -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). - -#### Login to our npm registry with a new setup +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). -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. +### Install with Angular CLI (`ng add`) -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: - -- 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. - -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 - -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: +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 -npm i -g @igniteui/angular-schematics +ng new --style=scss ``` -or: +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 -npm install -g igniteui-cli +ng add igniteui-angular ``` -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. +> [!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. -To activate the guide using the Ignite UI for Angular Schematics run: +#### Additional packages -```cmd -ng new --collection="@igniteui/angular-schematics" -``` +Some Ignite UI for Angular components ship as separate npm packages and are added independently: -or run the following command in case you are using the CLI tool: +**[Grid Lite](../grid-lite/overview.md) - open source (MIT)** + +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 -ig +ng add igniteui-grid-lite ``` ->[!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

-
- -Learn more about our [Angular Schematics & Ignite UI CLI](cli-overview.md). +**[Dock Manager](../dock-manager.md) - premium** -## Using Ignite UI for Angular +A pane-based layout component where end users can pin, resize, move, and hide panes at runtime. -We are now ready to start using Ignite UI for Angular components! - -### Add components automatically +```cmd +ng add igniteui-dockmanager +``` -#### 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 @@ -175,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. - -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! - -#### Run application +> 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`. -Now let’s run our application to see our awesome page! +## Add Components Manually (Standalone) -```cmd -npm start -``` - -### Add components manually +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. -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() ]; @@ -219,34 +143,14 @@ const providers: Provider = [ export const appConfig: ApplicationConfig = { providers }; ``` -#### Use components +### Import and use the Grid -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}}! -

-
- -
- - - - -
-``` - -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', @@ -256,70 +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). -## Additional Resources +**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 + +- [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) 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