Add

ig add

Overview

ig add [template] [name] adds a template by its ID and providing a name.

The add command is supported on existing project created with the Ignite UI CLI. You cannot use the add command before creating a project using the new command or using the step by step guide which is invoked by the ig command. Another way to use the add command is in a project created with the Angular CLI but only after executing ng add igniteui-angular which will add the Ignite UI CLI to the project. The quickstart projects do not support the add command, meaning that you cannot add more components than the predefined ones for the given quickstart project.

Arguments

module (v2.0.0)

module (alias: -m)

note: module argument is 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:

ig add grid newCombo --module=myModule/myModule.module.ts

skip-route (v3.2.0)

--skip-route (alias: -srk)

Don't auto-generate am app navigation route for the new component

Ignite UI for jQuery templates

Following is a table that demonstrates what Ignite UI for jQuery templates are available in the supported frameworks:

Template	Code and description	jQuery	Angular	React
Grid
grid	ig add grid newGrid Features choices: Sorting, Paging, Filtering	✅	✅	✅
grid-custom	ig add grid-custom newCustomGrid Features choices: Sorting, Paging, Filtering, Selection, Updating, ColumnMoving, Summaries, Resizing, Hiding, GroupBy	✅	✅	✅
grid-editing	ig add grid-editing newGridEditing Features choices: Sorting, Paging, Filtering. Updating is enabled by default.	✅	✅	✅
grid-export	ig add grid-export newGridExport A template for exporting a Grid to Excel.Features choices: Sorting, Paging, Filtering, Summaries, Hiding	✅	✅	✅
grid-templating	ig add grid-templating newGridTemplating Features choices: Sorting, Paging, Filtering	✅	✅	✅
Hierarchical Grid
hierarchical-grid	ig add hierarchical-grid newHierarchicalGrid Features choices: Sorting, Paging, Filtering	✅	✅	✅
hierarchical-grid-custom	ig add hierarchical-grid-custom newCustomHierarchicalGrid Features choices: Sorting, Paging, Filtering, Selection, Updating, ColumnMoving, Summaries, Resizing, Hiding	✅	✅	✅
hierarchical-grid-editing	ig add hierarchical-grid-editing newHierarchicalGridEditing Sorting, Paging, Filtering. Updating is enabled by default.	✅	✅	✅
hierarchical-grid-export	ig add hierarchical-grid-export newHierarchicalGridExport A template for exporting a Hierarchical Grid to Excel.Features choices: Sorting, Paging, Filtering, Summaries, Hiding	✅	✅	✅
Tree Grid
tree-grid	ig add tree-grid newTreeGrid A basic Tree Grid template.Features choices: Sorting, Paging, Filtering, Summaries, Hiding	✅	✅	✅
tree-grid-custom	ig add tree-grid-custom newCustomTreeGrid A template allowing you to create a Tree Grid with enabled features of your choice.Features choices: Sorting, RowSelectors, Filtering, Updating, ColumnMoving, Resizing, Hiding	✅	✅	✅
tree-grid-editing	ig add tree-grid-editing newTreeGridEditing Features choices: Sorting, Filtering	✅	✅	✅
tree-grid-export	ig add tree-grid-export newTreeGridExport A template for exporting a Tree Grid to Excel.Features choices: Filtering, Summaries, Hiding	✅	✅	✅
tree-grid-file-explorer	ig add tree-grid-file-explorer newTreeGridFileExplorer Features choices: Sorting	✅	✅	🚧 #36
Editors
text-editor	ig add text-editor newTextEditor The text editor is a control that renders an input field which can be formatted for single or multiline input.	✅	✅	✅
numeric-editor	ig add numeric-editor newNumericEditor The numeric editor is a control that renders an input field which only accepts numeric digits.	✅	✅	✅
currency-editor	ig add currency-editor newCurrencyEditor The currency editor is a control which renders an input field which only accepts numeric values, formatted as various currency types.	✅	✅	✅
mask-editor	ig add mask-editor newMaskEditor The mask editor is a control that renders an input field enforces input restrictions as determined by a given input mask.	✅	✅	✅
date-picker	ig add date-picker newDatePicker The date picker allows you to have input field with dropdown calendar and specified by developer display date format.	✅	✅	✅
Combo
combo	ig add combo newCombo The combo is a combo box control that offers auto-complete, auto-suggest, and rich editing capabilities.	✅	✅	✅
Charts
bar-chart	ig add bar-chart newBarChart Bar series template of Data Chart.	✅	✅	✅
column-chart	ig add column-chart newColumnChart Column series template of Data Chart.	✅	✅	✅
doughnut-chart	ig add doughnut-chart newDoughnutChart The Doughnut Chart allows for proportionally illustrating the occurrences of a variable. The inner radius of the control is configurable, and the Doughnut Chart’s series provides a built-in support for selecting and exploding its slices.	✅	✅	✅
financial-chart	ig add financial-chart newFinancialChart Financial series template of Data Chart	✅	✅	✅
funnel-chart	ig add funnel-chart newFunnelChart The Funnel Chart control provides functionality for displaying funnel charts in HTML5 web applications and sites based on the Canvas element and its associated API.	✅	✅	✅
line-chart	ig add line-chart newLineChart Line series template of Data Chart	✅	✅	✅
pie-chart	ig add pie-chart newPieChart The Pie Chart provides functionality for displaying various kinds of charts in web applications based on the HTML5 Canvas element.	✅	✅	✅
radial-chart	ig add radial-chart newRadialChart Radial series template of Data Chart	✅	✅	✅
scatter-chart	ig add scatter-chart newScatterChart Scatter series template of Data Chart	✅	N/A	✅

Ignite UI for Angular templates

Following is a table that demonstrates what Ignite UI for Angular templates are available:

Template	Code and description
Grids & Lists
grid	ig add grid newGrid Basic template for IgxGrid.
grid-batch-editing	ig add grid-batch-editing newGridBatchEditing Sample IgxGrid with batch editing.
custom-grid	ig add custom-grid newCustomGrid IgxGrid with optional features like sorting, filtering, editing, etc.
grid-summaries	ig add grid-summaries newGridSummaries IgxGrid with summaries feature.
grid-multi-column-headers	ig add grid-multi-column-headers newGridMultiColumnHeaders IgxGrid with multiple header columns.
tree grid	ig add custom-tree-grid newCustomTreeGrid IgxTreeGrid with optional features like sorting, filtering, row editing, etc.
list	ig add list newList Basic IgxList.
combo	ig add combo newCombo Basic IgxCombo with templating.
Charts
category chart	ig add category-chart newCategoryChart Basic category chart with chart type selector.
financial chart	ig add financial-chart newFinancialChart Basic financial chart with automatic toolbar and type selection.
Gauges
bullet graph	ig add bullet-graph newBulletGraph IgxBulletGraph with different animations.
linear gauge	ig add linear-gauge newLinearGauge IgxLinearGauge with different animations.
radial gauge	ig add radial-gauge newRadialGauge IgxRadialGauge with different animations.
Layouts
accordion	ig add accordion newAccordion Basic IgxAccordion.
dock-manager (v5.2.0)	ig add dock-manager newDockManager A dock-manager with nine content slots.
carousel	ig add carousel newCarousel Basic IgxCarousel.
tabs	ig add tabs newTabs Basic IgxTabs.
bottom-nav	ig add bottom-nav newBottomNav Three item bottom-nav template.
Data Entry & Display
chip	ig add chip newChip Basic IgxChip.
dropdown	ig add dropdown newDropDown Basic IgxDropDown.
select (v4.1.0)	ig add select newSelect Basic IgxSelect.
select (v4.1.0)	ig add select-groups newGroupsSelect Select With Groups.
select (v4.1.0)	ig add select-in-form newFormSelect IgxSelect in a form.
input group	ig add input-group newInputGroup Basic IgxInputGroup form view.
Interactions
dialog	ig add dialog newDialog Basic IgxDialog.
tooltip	ig add tooltip newTooltip A fully customizable tooltip.
Scheduling
date-picker	ig add date-picker newDatePicker Basic IgxDatePicker.
time-picker	ig add time-picker newTimePicker Basic IgxTimePicker.
calendar	ig add calendar newCalendar IgxCalendar with single selection.

Note

After 13.1.0 and based on the project type (legacy or standalone), the add command will add a standalone component template or module based one.

Ignite UI for React templates (v4.0.0)

Following is a table that demonstrates what Ignite UI for React templates are available:

Template	Code and description
Grids & Lists
grid	ig add grid newGrid Basic template for IgxGrid.
Charts
category chart	ig add category-chart newCategoryChart Basic category chart.
financial chart	ig add financial-chart newFinancialChart Basic financial chart with automatic toolbar.
doughnut chart	ig add doughnut-chart newDoughnutChart Basic doughnut chart with legend.
pie chart	ig add pie-chart newPieChart Basic pie chart with legend.
Gauges
bullet graph	ig add bullet-graph newBulletGraph Basic IgrBulletGraph template.
linear gauge	ig add linear-gauge newLinearGauge Basic IgrLinearGauge template.
radial gauge	ig add radial-gauge newRadialGauge Basic IgrRadialGauge template.