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.

    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
    hierarchical-grid Ignite 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-editing Ignite 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-custom Ignite 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-summaries Ignite 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-grid Ignite 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.
    tree Ignite 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.
    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.
    Maps
    geographic-map Ignite 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-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.
    accordion Ignite 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.
    stepper Ignite 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
    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.
    autocomplete Ignite 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-autocomplete Ignite 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
    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 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.

    Template Code and description
    awesome-grid Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid
    Ignite UI CLI:
    ig add awesome-grid newAwesomeGrid
    crm-grid Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c crm-grid newCrmGrid
    Ignite UI CLI:
    ig add crm-grid newCrmGrid
    fintech-grid Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid
    Ignite UI CLI:
    ig add fintech-grid newFinTechGrid
    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
    login Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c login newLogin
    Ignite UI CLI:
    ig add login newLogin
    weather-forecast Ignite UI Schematics collection:
    ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast
    Ignite UI CLI:
    ig add weather-forecast newWeatherForecast