What’s new in Ignite UI for Angular 22<\/strong><\/p>\n\n\n\n \u26a0\ufe0f Two default changes on upgrade: input Ignite UI for Angular 22 introduces derived themes for the Styling a grid previously meant theming each nested control on its own. Now, when you pass 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.<\/p>\n\n\n\n The same pattern applies when defining a Hierarchical Grid custom theme<\/a> or styling the Tree Grid<\/a>. View the grid-theme() Sass API reference -><\/a><\/p>\n\n\n\n A dedicated Use it instead of the Excel-filtering color properties that previously lived on View the Grid theming documentation -><\/a><\/p>\n\n\n\n The Select dropdown now opens below the input – or above it when there is not enough space – using This makes View Select component documentation -><\/a><\/p>\n\n\n\n Default input type changed from line to box<\/strong> Select default positioning changed<\/strong> Upgrade with \n
grid-theme()<\/code> and the grid’s nested buttons, inputs, chips, and scrollbars realign automatically.<\/li>\n\n\n\nexcel-filtering-theme()<\/code> function replaces the Excel-filtering color properties on grid-theme()<\/code>.<\/li>\n\n\n\nAutoPositionStrategy<\/code>, with an opt-in strategy to keep the old overlap behavior.<\/li>\n<\/ul>\n\n\n\ntype<\/code> is now box<\/code> (ng update<\/code> auto-preserves the line<\/code> look), and Select dropdown positioning changed. See the migration notes below.
\n\ud83d\udce6 npm install igniteui-angular@22.0.0<\/code>
\n\ud83d\udcc4 Full changelog<\/a><\/p>\n\n\n\n
\n\n\n\nDerived Grid Themes<\/h2>\n\n\n\n
IgxGrid<\/code><\/a> and its internal components.<\/p>\n\n\n\n$background<\/code>, $foreground<\/code>, and $accent-color<\/code> to grid-theme()<\/code> and include the result with tokens()<\/code>, the grid’s nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, and chips derive their tokens from the parent theme. $foreground<\/code> is optional: omit it and it is derived as a contrast color for the background.<\/p>\n\n\n\n$grid-theme: grid-theme(\n $schema: $schema,\n $background: #ffffff,\n $foreground: #1f2937,\n $accent-color: #0061a8\n);\n\nigx-grid {\n @include tokens($grid-theme);\n}\n<\/pre>\n\n\n\n
\n\n\n\nExcel Style Filtering Theme<\/h2>\n\n\n\n
excel-filtering-theme()<\/code> function now styles Excel Style Filtering directly.<\/p>\n\n\n\ngrid-theme()<\/code>. 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.<\/p>\n\n\n\n$excel-filtering-theme: excel-filtering-theme(\n $schema: $schema,\n $background: #f4f6fb,\n $accent-color: #0061a8\n);\n\nigx-grid-excel-style-filtering,\n.igx-excel-filter__secondary {\n @include tokens($excel-filtering-theme);\n}\n<\/pre>\n\n\n\n
\n\n\n\nSelect Component<\/h2>\n\n\n\n
AutoPositionStrategy<\/code>.<\/p>\n\n\n\nIgxSelectComponent<\/code> 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<\/code> restores it through overlaySettings<\/code>.<\/p>\n\n\n\nthis.select.overlaySettings = {\n positionStrategy: new IgxSelectOverlapPositionStrategy(this.select)\n};\n<\/pre>\n\n\n\n
\n\n\n\n\u26a0\ufe0f Breaking Changes & Migration<\/h2>\n\n\n\n
\nAffected: IgxInputGroupComponent<\/code>, IgxSelectComponent<\/code>, IgxDatePickerComponent<\/code>, IgxDateRangePickerComponent<\/code>, IgxTimePickerComponent<\/code>
\nWhat changed: the default type<\/code> is now box<\/code> instead of line<\/code>.
\nMigration: ng update<\/code> adds type=\"line\"<\/code> to existing instances that do not already set type<\/code> explicitly, preserving their current appearance. New instances default to box<\/code>.<\/p>\n\n\n\n
\nAffected: IgxSelectComponent<\/code>
\nWhat changed: the default positioning strategy moved from the internal overlap strategy to AutoPositionStrategy<\/code>; the dropdown now opens below or above the input rather than over it.
\nMigration: this change has no automatic migration. To keep the previous overlap behavior, set overlaySettings<\/code> with IgxSelectOverlapPositionStrategy<\/code> (see the Select component section above).
\nView update guide -><\/a><\/p>\n\n\n\n
\n\n\n\nInstall Ignite UI for Angular 22<\/h2>\n\n\n\n
# Fresh install\nnpm install igniteui-angular@22.0.0\n\n# Upgrade existing project\nng update igniteui-angular@22.0.0\n<\/pre>\n\n\n\n
![\"igniteui-angular](\"https:\/\/img.shields.io\/npm\/v\/igniteui-angular.svg\")
<\/a><\/figure>\n\n\n\n
\n\n\n\nGet Started with Ignite UI for Angular 22<\/h2>\n\n\n\n
ng update<\/code>, then theme a grid and its nested controls from a single parent theme.<\/p>\n\n\n\n