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 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 that uses Transaction service for batch editing
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 with optional features like Sorting, Filtering, Cell Editing, Row Editing, Group By, Resizing, Selection, Paging, Column Pinning, Column Moving, Column Hiding
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 with summaries 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 with multi-column headers
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 with optional features like Sorting, Filtering, Cell Editing, Row Editing, Resizing, Row Selection, Paging, Column Pinning, Column Moving, Column Hiding
list Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c list newList
Ignite UI CLI:
ig add list newList
Basic IgxList.
IgxList 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 with custom templating.
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 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 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 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 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 with different animations.
Layouts
carousel Ignite UI Schematics collection:
ng g @igniteui/angular-schematics:c carousel newCarousel
Ignite UI CLI:
ig add carousel newCarousel
Basic IgxCarousel.
IgxCarousel 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 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 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 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 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 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 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 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.
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 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.
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 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 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 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 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 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 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 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..
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 to display daily weather forecast details.