Ignite UI for Angular 22 Released – Derived Grid Themes

Ignite UI for Angular 22 is now available. This release centers on derived themes for the Data Grid, a dedicated Excel Style Filtering theme function, and two default behavior changes in input styling and Select positioning.

Ignite UI for Angular 22 is part of the broader Infragistics Ultimate 26.1 release. For the full cross-framework picture – the AI-assisted development toolchain plus what shipped in Blazor, React, and Web Components – see What’s New in Infragistics Ultimate 26.1. Below are the highlights.

What’s new in Ignite UI for Angular 22

• Derived Grid themes – set three color properties on grid-theme() and the grid’s nested buttons, inputs, chips, and scrollbars realign automatically.
• Excel Style Filtering theme – a dedicated excel-filtering-theme() function replaces the Excel-filtering color properties on grid-theme().
• Select positioning – the dropdown now opens below or above the input via AutoPositionStrategy, with an opt-in strategy to keep the old overlap behavior.

⚠️ Two default changes on upgrade: input type is now box (ng update auto-preserves the line look), and Select dropdown positioning changed. See the migration notes below.
📦 npm install igniteui-angular@22.0.0
📄 Full changelog

---

Derived Grid Themes

Ignite UI for Angular 22 introduces derived themes for the IgxGrid and its internal components.

Styling a grid previously meant theming each nested control on its own. Now, when you pass $background, $foreground, and $accent-color to grid-theme() and include the result with tokens(), the grid’s nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, and chips derive their tokens from the parent theme. $foreground is optional: omit it and it is derived as a contrast color for the background.

Derived themes cover the Grid, Pivot Grid, Excel Filtering, Grid Toolbar, Paginator, Column Actions, and the Query Builder and Advanced Filtering Dialog, and apply through the existing component theme mixins with no extra mixin call. You can still scope a theme to one compound component by passing the same color properties to its own theme function.

$grid-theme: grid-theme(
    $schema: $schema,
    $background: #ffffff,
    $foreground: #1f2937,
    $accent-color: #0061a8
);

igx-grid {
    @include tokens($grid-theme);
}

The same pattern applies when defining a Hierarchical Grid custom theme or styling the Tree Grid. View the grid-theme() Sass API reference ->

---

Excel Style Filtering Theme

A dedicated excel-filtering-theme() function now styles Excel Style Filtering directly.

Use it instead of the Excel-filtering color properties that previously lived on grid-theme(). The generated tokens are scoped to the Excel Style Filtering UI and its nested controls, so you can give the filtering experience its own background and accent without overriding the grid’s theme.

$excel-filtering-theme: excel-filtering-theme(
    $schema: $schema,
    $background: #f4f6fb,
    $accent-color: #0061a8
);

igx-grid-excel-style-filtering,
.igx-excel-filter__secondary {
    @include tokens($excel-filtering-theme);
}

View the Grid theming documentation ->

---

Select Component

The Select dropdown now opens below the input – or above it when there is not enough space – using AutoPositionStrategy.

This makes IgxSelectComponent consistent with other connected components. The previous default overlapped the selected item’s text over the input. If you rely on that behavior, the new publicly exported IgxSelectOverlapPositionStrategy restores it through overlaySettings.

this.select.overlaySettings = {
    positionStrategy: new IgxSelectOverlapPositionStrategy(this.select)
};

View Select component documentation ->

---

⚠️ Breaking Changes & Migration

Default input type changed from line to box
Affected: IgxInputGroupComponent, IgxSelectComponent, IgxDatePickerComponent, IgxDateRangePickerComponent, IgxTimePickerComponent
What changed: the default type is now box instead of line.
Migration: ng update adds type="line" to existing instances that do not already set type explicitly, preserving their current appearance. New instances default to box.

Select default positioning changed
Affected: IgxSelectComponent
What changed: the default positioning strategy moved from the internal overlap strategy to AutoPositionStrategy; the dropdown now opens below or above the input rather than over it.
Migration: this change has no automatic migration. To keep the previous overlap behavior, set overlaySettings with IgxSelectOverlapPositionStrategy (see the Select component section above).
View update guide ->

---

Install Ignite UI for Angular 22

# Fresh install
npm install igniteui-angular@22.0.0

# Upgrade existing project
ng update igniteui-angular@22.0.0

---

Get Started with Ignite UI for Angular 22

Upgrade with ng update, then theme a grid and its nested controls from a single parent theme.