Close
Angular React Web Components Blazor

AI-Assisted Development
Agent Workflow
Ignite UI for Angular Skills
CLI MCP
Theming MCP
Maker Framework
General
Angular: A Complete Guide
Angular Schematics & Ignite UI CLI
Overview
Getting Started with Ignite UI for Angular Schematics
Step by Step guide using Ignite UI for Angular Schematics
Getting Started with Ignite UI CLI
Step by Step guide using Ignite UI CLI
Templates
Authentication Project Template
Data Analysis
Data Visualization Changelog
Getting started
How to
Build Real-time SignalR App with .NET Core
Angular Reactive Forms
Build CRUD operations with IgxGrid
Customize and Optimize Themes
Use Standalone Components
Build App with CLI MCP and Theming MCP
Licensing
Localization (i18n)
Multiple Entry Points
Open-Source vs Premium
Server-side rendering (SSR)
Update guide
WPF to Angular guide
Overview
Create your first Angular app
Create your UI with Angular components
One-Way Binding
Two-Way Binding
Angular Events
Transforming Data with Angular Pipes
Structural Directives in Angular
Layout Elements
Interactivity
RTL Support
Accessibility Compliance
Grids & Lists
Overview
Data Grid
Overview
Cell Merging
Clipboard Interactions
Collapsible Column Groups
Column Data Types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Grid with Cascading combos
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Group By
Keyboard navigation
Live Data / Real-Time
Master-Detail Grid
Multi-column Headers
Multi-row Layout
Paging
Paste from Excel
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Searching
Selection
Overview
Row selection
Cell selection
Selection-based Aggregates
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Tree Grid
Overview
Cell Merging
Clipboard Interactions
Collapsible Column Groups
Column Data types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Group By
Keyboard navigation
Live Data / Real-Time
Load On Demand
Multi-column Headers
Paging
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Searching
Selection
Overview
Row selection
Cell selection
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Hierarchical Grid
Overview
Cell Merging
Collapsible Column Groups
Column Data types
Column Hiding
Column Moving
Column Pinning
Column Resizing
Conditional Styling
Editing
Overview
Cell Editing
Row Editing
Row Adding
Batch Editing
Validation
Export services
Filtering
Overview
Excel Style Filtering
Advanced Filtering
Keyboard navigation
Load on Demand
Multi-column Headers
Paging
Remote Data Operations
Row Actions
Row Drag
Row Pinning
Selection
Overview
Row selection
Cell selection
Column Selection
Size
Sizing
Sorting
State Persistence
Summaries
Toolbar
Virtualization and performance
Pivot Grid
Overview
Export services
Pivot Grid Features
Pivot Grid Remote Operations
State Persistence
Grid Lite
Overview
Column Configuration
Overview
Cell Template
Header Template
Data Binding
Filtering Overview
Sorting
Styling & Theming
Tree
List View
Combo
Overview
Features
Remote Binding
Templates
Single Select ComboBox
Spreadsheet
Overview
Activation
Chart Adapter
Clipboard
Conditional Formatting
Configuring Spreadsheet
Commands
Data Validation
Hyperlinks
Excel Utility
Dashboards
Dashboard Tile
Charts
Overview
Area Chart
Bar Chart
Bubble Chart
Column Chart
Composite Chart
Data Pie Chart
Donut Chart
Financial / Stock Chart
Line Chart
Pie Chart
Point Chart
Polar Chart
Radial Chart
Scatter Chart
Shape Chart
Spline Chart
Sparkline Chart
Stacked Chart
Step Chart
Treemap
Chart API
Chart Features
Overview
Axis Gridlines
Axis Layouts
Axis Options
Axis Types
Chart Animations
Chart Annotations
Charting in Dashboards
Chart Data Aggregations
Chart Data Filtering
Chart Data Legend
Chart Data Annotations
Chart Data Tooltip
Chart Data Selection
Chart Highlight Filter
Chart Highlighting
Chart Markers
Chart Navigation
Chart Overlays
Chart Performance
Chart Synchronization
Chart Tooltips
Chart Trendlines
Chart User Annotations
Zoom Slider
Maps
Overview
Geographic Area Map
Geographic Contour Map
Geographic High Density Map
Geographic Bubble Map
Geographic Symbol Map
Geographic Polygon Map
Geographic Polyline Map
Geographic Map API
Geographic Map Features
Overview
Binding CSV File
Binding JSON File
Binding Data Model
Binding Shape File
Binding Multiple Shapes
Binding Multiple Sources
Displaying Azure Imagery
Displaying Bing Imagery
Displaying Esri Imagery
Displaying Heat Imagery
Displaying OSM Imagery
Navigating Map Content
Shape Files Reference
Shape Styling
Shape Styling Utility
World Connections
World Locations
World Utility
Frameworks
Excel Library
Overview
Using Cells
Using Tables
Using Workbooks
Using Worksheets
Working with Charts
Working with Sparklines
Excel Utility
Gauges
Bullet Graph
Linear Gauge
Radial Gauge
Styling & Themes
Overview
Palettes
Elevations
Typography
Roundness
Size
Spacing
Sass
Overview
Configuration
Palettes
Elevations
Typography
Schemas
Animations
Roundness
Global Themes
Component Themes
Predefined Themes
Material
Fluent
Bootstrap
Indigo
Misc
Using Tailwind Custom Classes
Printing styles
Angular Material Theming
Bootstrap Theming
Data Entry & Display
Autocomplete
Badge
Button
Button Group
Checkbox
Chip
Circular Progress
Color Editor
Divider
Drop Down
Overview
Virtual Drop Down
Multi-select Hierarchical Drop Down
Icon
Overview
Icon Service
Material Icons Extended
Icon Button
Input Group
Label & Input
Linear Progress
Mask
Paginator
Query Builder
Overview
Using Query Builder Model
Radio & Radio Group
Rating
Select
Switch
Text Highlight
Virtual For Directive
Interactions
Action Strip
Chat
Dialog Window
Drag and Drop
Overlay
Overview
Positioning Strategies
Scrolling Strategies
Styling
Ripple
Slider
Toggle
Tooltip
Zoom Slider
Menus
Navbar
Navigation Drawer
Toolbar
Layouts
Accordion
Avatar
Bottom Navigation
Card
Carousel
Dock Manager
Expansion Panel
Layout Manager
Splitter
Stepper
Tabs
Tile Manager
Notifications
Banner
Snackbar
Toast
Scheduling
Calendar
Date Picker
Date Range Picker
Date Time Editor
Month Picker
Time Picker
Services
CSV Exporter
Excel Exporter
PDF Exporter
Transaction Service
Overview
Transaction Service class hierarchy
How to use the Transaction Service

Component Templates

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.

TemplateCode and descriptionDemo
Grids & Lists
gridIgnite 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-editingIgnite 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-gridIgnite 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-summariesIgnite 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-headersIgnite 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 gridIgnite 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
hierarchical-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid
Ignite UI CLI:
ig add hierarchical-grid newHierarchicalGrid
Basic IgxHierarchicalGrid.
IgxHierarchicalGrid component with auto generated columns.
hierarchical-grid-batch-editingIgnite 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 that uses Transaction service for batch editing.
hierarchical-grid-customIgnite 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 with optional features like Sorting, Filtering, Row Editing, Selection.
hierarchical-grid-summariesIgnite 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 with summaries feature.
pivot-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid
Ignite UI CLI:
ig add pivot-grid newPivotGrid
Basic IgxPivotGrid.
IgxPivotGrid component for multi-dimensional data analysis.
treeIgnite 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 with selection and load-on-demand node support.
listIgnite 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.
comboIgnite 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 chartIgnite 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 chartIgnite 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 graphIgnite 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 gaugeIgnite 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 gaugeIgnite 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.
Maps
geographic-mapIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c geographic-map newGeographicMap
Ignite UI CLI:
ig add geographic-map newGeographicMap
Basic IgxGeographicMap.
IgxGeographicMap displaying geo-spatial data on geographic imagery maps.
Layouts
dock-managerIgnite 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.
carouselIgnite 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.
tabsIgnite 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-navIgnite 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.
accordionIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c accordion newAccordion
Ignite UI CLI:
ig add accordion newAccordion
Basic IgxAccordion sample.
IgxAccordion with multiple collapsible panels in a single container.
stepperIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c stepper newStepper
Ignite UI CLI:
ig add stepper newStepper
Basic IgxStepper sample.
IgxStepper visualizing content as a process with successive steps.
Data Entry & Display
chipIgnite 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.
dropdownIgnite 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 groupIgnite 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.
autocompleteIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c autocomplete newAutocomplete
Ignite UI CLI:
ig add autocomplete newAutocomplete
Simple IgxAutocomplete.
IgxAutocomplete enhancing text input with a dropdown of suggested options.
enhanced-autocompleteIgnite 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 with grouped suggestion items.
Interactions
dialogIgnite 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.
tooltipIgnite 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-pickerIgnite 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-pickerIgnite 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.
calendarIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c calendar newCalendar
Ignite UI CLI:
ig add calendar newCalendar
IgxCalendar with single selection.
Basic IgxCalendar 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.

TemplateCode and description
awesome-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
Ignite UI CLI:
ig add awesome-grid newAwesomeGrid
crm-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
Ignite UI CLI:
ig add crm-grid newCrmGrid
fintech-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
Ignite UI CLI:
ig add fintech-grid newFinTechGrid
fintech-tree-gridIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid
Ignite UI CLI:
ig add fintech-tree-grid newFinTechTreeGrid
loginIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c login newLogin
Ignite UI CLI:
ig add login newLogin
weather-forecastIgnite UI Schematics collection:
ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
Ignite UI CLI:
ig add weather-forecast newWeatherForecast