Add

ig add

Overview

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

The add command is supported only on existing project created with the Ignite UI CLI. You cannot use the add command before creating a project uisng the new command or using the step by step guide which is invoked by the ig command. 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 --name=myModule/myModule.module.ts

Ignite UI for JavaScript templates

Following is a table that demonstrates what Ignite UI for JavaScript 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.
awesome-grid	ig add awesome-grid newAwesomeGrid A richer example of IgxGrid.
list	ig add list newList Basic IgxList.
Layouts
carousel	ig add carousel newCarousel Basic IgxCarousel.
bottom-nav	ig add bottom-nav newBottomNav Three item bottom-nav template.
Scheduling
date-picker	ig add date-picker newDatePicker Basic IgxDatePicker.
time-picker	ig add time-picker newTimePicker Basic IgxTimePicker.