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.