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 | ||
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 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 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. |
View page on
GitHub