Infragistics Ignite UI for Angular Releases

• IgxChipComponent
  • Added the outlined property to the component. When set to true, the Chip will have an outlined style.
• Theming
  • Breaking Change - The chip-theme properties - $focus-outline-color and $focus-selected-outline-color were replaced with $focus-shadow-color and $focus-selected-shadow-color.
  • Scrollbars are now styled with the standard scrollbar-color and scrollbar-width properties instead of the ::-webkit-scrollbar-* pseudo-elements. Scrollbars rendered inside a themed host - igx-grid and the rest of the grid family, igx-query-builder, igx-column-actions and the Excel-style filtering menus - follow that host's own background and foreground colors. Because both properties resolve their var() references on the element that declares them and descendants inherit the already-resolved value, every scope that overrides the scrollbar-theme tokens must also re-declare the properties; the library does this internally for the hosts listed above.
  • The standard scrollbar properties expose only two colors and three width keywords, so most scrollbar-theme properties no longer have any effect. $sb-thumb-bg-color and $sb-track-bg-color continue to work. The following have become no-ops: $sb-thumb-bg-color-hover, $sb-track-bg-color-hover, $sb-thumb-min-height, $sb-thumb-border-color, $sb-thumb-border-size, $sb-thumb-border-radius, $sb-track-border-color, $sb-track-border-size, $sb-corner-bg, $sb-corner-border-color and $sb-corner-border-size. They remain valid arguments to scrollbar-theme(), so existing themes keep compiling, but the values are ignored. The ng update migration for 22.2.0 removes these arguments from existing scrollbar-theme(...) calls automatically.
  • $sb-size no longer sets the scrollbar thickness. scrollbar-width accepts only auto, thin or none, so a length cannot drive it. The migration removes $sb-size along with the properties above; set --sb-width: thin on the scope that declares the scrollbar tokens, or scrollbar-width: thin directly on the scrolling element, where a thinner scrollbar is required.
  • Scrollbar arrow buttons cannot be styled or enabled through the standard properties, and scrollbar-width: thin removes them where the platform draws them.
• Firefox
• The scrollbar-color and scrollbar-width properties are not supported on Firefox versions prior to 64, so the scrollbars in those versions will render with the platform default colors and size.

• IgxCheckboxComponent
• Fixed the tick-mark icon rendering with the Indigo shape (rounded rect + custom path) inside CSS-scoped subtrees that use a different design system than the application's global theme, e.g. a material-themed widget nested inside an indigo-themed app. Both tick-mark variants are now always rendered and toggled purely via CSS (@container style(--ig-theme: indigo)), removing the dependency on JS-side theme detection that could go stale in nested/multi-theme scenarios.
• Ripple
• Fixed [igxRipple] unconditionally stamping --ig-theme/--ig-theme-variant (from its own compile-time schema) onto its host element, which broke runtime theme inheritance for any content nested inside a ripple host (e.g. a checkbox's tick mark) when that content sat in a differently CSS-scoped theme than the app's global one.

• New Features
  • Theming
    • Component structural styles are now scoped and tree-shakable - they ship inside each component's own bundle instead of a single global, all-or-nothing theme stylesheet. An app now pays for CSS only for the components it actually imports.
    • Design tokens for all four design systems (Material, Bootstrap, Fluent, Indigo) × light/dark are emitted once per theme into the global preset (e.g. igniteui-angular.css). As a result of those changes, the pre-built theme files are roughly half the size (~49% smaller raw, ~58% smaller gzip).
    • Finalized the migration to the tokens() mixin as the single way to apply a component theme, replacing the individual per-component wrapper mixins (avatar(), dialog(), checkbox(), tabs(), etc.) across the rest of the library, following the same pattern already introduced for the Grid family in 22.0.0.
    • The 22.1.0 ng update migration performs a syntactic replacement of removed wrapper mixins, but cannot reliably infer whether an application's customization was intended as a universal override or as a local theme. Review migrated tokens() calls and add $mode: 'scoped' where one of the cases above applies.
    • Cascade layering (ig.reset → ig.base → ig.material/ig.bootstrap/ig.fluent/ig.indigo → ig.derived) keeps precedence deterministic between structural styles, design-system overrides, and derived/contextual tokens now that styles are split across component bundles and the global preset.
  • Breaking Changes
    • The individual per-component Sass theme wrapper mixins (avatar, badge, banner, bottom-nav, button-group, calendar, card, carousel, checkbox, chip, column-actions, combo, date-picker, date-range-picker, dialog, divider, drop-down, expansion-panel, excel-filtering, grid-summary, grid-toolbar, icon, file-input, input-group, list, navbar, navdrawer, paginator, progress-circular, progress-linear, query-builder, radio, select, slider, snackbar, splitter, stepper, switch, tabs, time-picker, toast, tree, and the grid/pivot mixins), which have been marked as deprecated in favor of the generic tokens/css-vars mixins for several major versions, have now been removed. Use the tokens() mixin instead. The ng update migration for 22.1.0 automatically rewrites existing @include <component>(<component>-theme(...)) calls to @include tokens(<component>-theme(...)). This is a syntactic migration; review each replacement and use $mode: 'scoped' for component-local themes as described in the Theming section above.
    • Removed the per-component -typography mixins (badge-typography, dialog-typography, checkbox-typography, etc.). Typography is now applied automatically as part of each component's tokens, so these standalone calls are no longer needed. The ng update migration deletes existing calls (including multi-line and aliased calls) automatically.
    • Removed the deep Sass imports of per-component structural partials (e.g. igniteui-angular/lib/core/styles/components/avatar/avatar-component) and their component() mixin calls. Structural styles are no longer optionally-included Sass — they now ship automatically with each component's bundle. The ng update migration removes these @use statements and matching component() calls automatically.
    • IgxDividerDirective has been replaced by IgxDividerComponent (divider is now a standalone component with its own scoped stylesheet). The ng update migration updates existing imports/usages automatically; IgxDividerModule is unaffected.
    • Some exports moved to a different entry point. An optional (recommended) ng update migration rewrites the affected imports automatically:
      • igniteui-angular/grids/core → igniteui-angular/core: IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand, IgxTimeSummaryOperand, GridSelectionRange, ISelectionNode, IMultiRowLayoutNode, ISelectionKeyboardState, ISelectionPointerState, IColumnSelectionState, SelectionState, IgxGridTransaction.
      • igniteui-angular/grids/grid → igniteui-angular/grids/core: IGroupingDoneEventArgs.
    • IgSizeDirective ([igSize]) is no longer part of the public API and is no longer exported from igniteui-angular/directives. Set the size directly on the element instead, e.g. style="--ig-size: var(--ig-size-small)", or via a component stylesheet.
• General
  • Strict TypeScript - The library is now built with strict: true (including strictNullChecks) and strictTemplates. The shipped typings are therefore more accurate: members that can be absent are now typed as nullable or optional, and a number of any types were replaced with real ones (for example ColumnType.summaries is now IgxSummaryOperand and ColumnType.calcWidth is string | number | null). Applications compiled in strict mode may need null checks or non-null assertions where the previous, looser typings allowed the code to pass. Runtime behavior is unchanged.
  • IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid, IgxColumnComponent
    • The rowStyles, headerStyles and headerGroupStyles inputs are now typed GridStyleCSSProperty | null instead of any. The new GridStyleCSSProperty interface is exported from igniteui-angular/core.
  • Removed Hammer.js dependency
    • The hammerjs and @types/hammerjs peer dependencies have been removed. All touch gesture support (Carousel swipe, Navigation Drawer pan/swipe, List Item pan, Time Picker vertical scroll, Grid Cell double-tap on iOS) is now implemented with native Pointer Events / Touch Events APIs.
    • HammerGesturesManager and related types (HammerInput, HammerStatic, HammerManager, HammerOptions) are no longer exported from igniteui-angular/core.
    • The ng add schematic no longer prompts for, or installs, hammerjs.
    • If your application imported hammerjs solely for Ignite UI components, you can safely remove it from your package.json dependencies, angular.json scripts/polyfills, and any import 'hammerjs' statements.
  • igxList
    • igx-list-item no longer tracks touch gestures when neither allowLeftPanning nor allowRightPanning is enabled, so pressing an item no longer captures the pointer or suppresses the touch scrolling of the list. When panning is enabled, the gestures are processed outside of the Angular zone, which keeps continuous touch dragging of large (virtualized) lists smooth.

• Angular 22 compatibility - All Ignite UI for Angular components are now fully compatible with Angular 22.
• Standalone component support - Components can now be used directly in standalone Angular applications without NgModule. New provide() functions (e.g. provideIgxCategoryChart()) let you register component feature sets through bootstrapApplication() providers, and imperative register() functions are available for DI-free setups.
• Per-component entry points for improved tree-shaking - Each package now exposes named subpath entry points (e.g. import 'igniteui-angular-charts/category-chart') that register only the feature set you need. The root package import remains fully side-effect-free and tree-shakeable, so you only pay for the components you use. For DataChart, graduated entry points such as data-chart-category, data-chart-scatter, and data-chart-financial let you pull in individual series families without bundling the entire chart.

• DataChart - An error is thrown when destroying chart with a data tooltip layer.

• Theming
  • Added derived themes for the Grid and related internal components. When a parent component theme is included, its internal controls now derive their tokens from the parent theme colors, keeping nested buttons, icons, inputs, dropdowns, checkboxes, scrollbars, chips, and other helper components visually aligned. The derived themes are introduces for the following components:
    • Grid
    • Excel Filtering
    • Grid Toolbar
    • Paginator
    • Column Actions
    • Query Builder and Advanced Filtering Dialog
    • The derived themes are applied through the existing component theme mixins, so no additional mixin call is required. To style the whole IgxGrid, provide the $background, $foreground, and $accent-color properties to grid-theme() and include the generated theme with tokens(). The $foreground property is optional; when omitted, it is derived automatically as a contrast color for the background. Internal components inherit derived tokens from the parent component theme.
  • Breaking Changes
    • IgxInputGroupComponent, IgxSelectComponent, IgxDatePickerComponent, IgxDateRangePickerComponent, IgxTimePickerComponent
    • The default type has changed from line to box. The ng update migration automatically adds type="line" to existing instances that do not already have an explicit type binding to preserve their appearance.
  • Behavioral Changes
    • IgxCarouselComponent
      • Changed the default tab order of the component; focus now flows starting with the active slide indicator, navigation buttons, or the first focusable element in the active slide, whichever is available.
  • General
    • Touch Gestures (HammerJS) (optional)
      • HammerModule, previously exported from @angular/platform-browser, is no longer available in Angular 22. Touch gesture support (Slider, Drag & Drop, Carousel swipe, Navigation Drawer) is optional.
    • IgxSelectComponent
      • The default positioning strategy has changed from the internal overlap strategy to AutoPositionStrategy. The dropdown now opens below (or above, if there is not enough space) the input element, consistent with other connected components.
    • Added IgxSelectOverlapPositionStrategy - a new publicly exported strategy that preserves the previous behavior of aligning the selected item's text over the input text.

IgxOverlayService

• IgxOverlayService.createAbsoluteOverlaySettings - Added a new overload accepting useContainerStrategy?: boolean as the second parameter. When true, uses ContainerPositionStrategy; otherwise defaults to GlobalPositionStrategy. The previous overload accepting outlet?: IgxOverlayOutletDirective | ElementRef is still supported but deprecated.

IgxSnackbarComponent, IgxToastComponent

• Added a new positioning input property. When set to container, the components is displayed inside its nearest positioned ancestor in place of the now deprecated outlet property.

IgxCombo, IgxSimpleCombo

• Introduced the selectionChanged event for both components. The event is not cancelable and is emitted after the selection is committed and the component state is updated.
• Added disableClear input that allows hiding the clear button even when items are selected. Defaults to false.

IgxOverlayService

• Deprecation - The outlet property in OverlaySettings, IgxOverlayOutletDirective, and igxToggleOutlet input on IgxToggleActionDirective are deprecated and will be removed in a future version. As overlay service now integrates the HTML Popover API and prefers rendering content in place / in the top layer, significantly reducing the need for outlet containers, new code should rely on the default in-place / top-layer rendering behavior instead of custom outlet containers.

AI-Assisted Development - Copilot Skill: Generate from Image Design

• Added a new igniteui-angular-generate-from-image-design Copilot Skill that teaches AI coding assistants/agents (e.g., GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI, etc.) how to implement Angular application views directly from design images (screenshots, mockups, wireframes).
• The skill provides a structured workflow covering image analysis, component discovery via MCP tools (list_components, get_doc), theme generation (create_palette, create_theme, create_component_theme), layout implementation, and visual refinement (set_size, set_spacing, set_roundness).
• Includes reference files:
  • Component Mapping - Maps common UI patterns (dashboards, charts, forms, navigation, data display, gauges) to the most appropriate Ignite UI for Angular component with key properties and decision rules.
  • Gotchas - Documents known pitfalls, component-specific constraints, and corrective patterns to help AI agents avoid common implementation mistakes.

AI-Assisted Development - Copilot Skills improvements

• igniteui-angular-grids skill - Added a new sizing.md reference covering grid and column width/height inputs, percentage and auto sizing modes, column sizing (minWidth, maxWidth, * star-sizing, auto-fit), and cell spacing/density control.
• igniteui-angular-components skill - Corrected Financial Chart (IgxFinancialChartComponent) documentation: updated chartType enum values to Auto, Candle, Line, Bar, Column to match the actual FinancialChartType API.
• igniteui-angular-theming skill - Minor cleanup to remove stale internal contributing reference.