Infragistics Ignite UI for Angular 릴리스

• IgxPivotGridComponent
  • IgxPivotRowDimensionHeaderTemplateDirective (igxPivotRowDimensionHeader) is now included in IGX_PIVOT_GRID_DIRECTIVES and IgxPivotGridModule, so the row dimension header template can be declared inside the pivot grid in standalone components.
• IgxTreeGridComponent
  • IgxRowLoadingIndicatorTemplateDirective (igxRowLoadingIndicator) is now exported from igniteui-angular/grids/tree-grid and included in IGX_TREE_GRID_DIRECTIVES, so the row loading indicator template for loadChildrenOnDemand can be declared inside the tree grid in standalone components.
• GridBaseAPIService
  • Deprecation - get_rec_id_by_index, sort_decoupled, get_filtered_data and the protected getSortStrategyPerColumn have been deprecated and will be removed in a future version. Use the record at the index in the grid data and its primaryKey value, the grid groupBy method, the grid filteredData property and the column sortStrategy property instead.
  • prepare_sorting_expression and prepare_grouping_expression (and prepare_sorting_expression in GridServiceType) now take a single expressions collection instead of an array of collections, as the grids always pass a single one.
• IgxFilteringService
  • Deprecation - filter_global has been deprecated and will be removed in a future version. Use the grid filteringExpressionsTree property instead.
• IgxTreeGridComponent
  • beginAddRowByIndex(index, true) now spawns the add row UI for a child of the row at the specified index, as documented. Previously the parent was the row before it, at index - 1.
• IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent
  • filter called without a condition for a column that has no filtering expressions now throws Invalid condition or Expression Tree! even if a filtering event handler sets filtering expressions for that column. Previously the expressions set by the handler were applied.

• IgxGridComponent, IgxTreeGridComponent, IgxHierarchicalGridComponent, IgxPivotGridComponent
  • Copying when only columns are selected now copies the selected columns' data. Previously the gridCopy event received only the first record, the clipboard stayed empty and an error was thrown.
  • IgxColumnComponent.pin(index) no longer throws when the target pinning area (start or end) has no pinned columns yet, and unpin(index) no longer throws when all columns are pinned.
  • navigateTo with a callback no longer throws with remote virtualization when the target row is not part of the loaded data.
  • Sorting or grouping by a column that is not sorted or grouped with SortingDirection.None no longer removes the last sorting or grouping expression of another column.
• IgxPivotGridComponent
  • With the horizontal row layout, Ctrl + Arrow Up, Ctrl + Arrow Down, Home and End now move to the first or last row dimension cell when it is outside of the view. Previously an error was thrown when the target row was more than four rows away.
  • Setting a pivotConfiguration without row dimensions (rows: null) on a grid that already displays row dimensions no longer throws an error. The row dimensions of the previous configuration are also no longer used for the row dimension columns of the new one.
• IgxPivotDataSelectorComponent
  • Activating the aggregation icon of a value while the aggregation drop-down of another value is open now reopens the drop-down for that value. Previously the drop-down stayed closed.
• IgxTreeGridComponent
  • beginAddRowByIndex(0) now spawns the add row UI as the first record, as in the other grids. Previously it logged a warning and did not enter add mode.
    Column layouts (igx-column-layout) and their child columns declared in a tree grid, which does not support multi-row layouts, are now excluded from the grid columns as intended. Previously they were kept.
  • Excel-style filtering now lists the column values when the tree grid uses a custom strategy that extends FilteringStrategy. Previously only (Blanks) was listed, because the filtered tree grid records were returned instead of their data.
  • With rowSelection set to multipleCascade, rowSelectionChanging is no longer emitted when the selection does not change, for example when selecting all rows while all of them are already selected.
• IgxHierarchicalGridComponent
  • The generated schema now resolves the fields of auto-generated row islands nested in other row islands from the first child record, instead of leaving them without fields, so their columns can be used in advanced filtering.
  • Column layouts (igx-column-layout) and their child columns declared in a hierarchical grid, which does not support multi-row layouts, are now excluded from the grid columns as intended. Previously they were kept.
• IgxRowIslandComponent
  • Setting expandChildren now also applies to child grids that are not in the DOM at the time, for example scrolled out of view, when they are rendered again. Previously they kept their previous state.
  • A row island added conditionally inside another row island, for example with @if, as well as a nested igc-row-island in Ignite UI for Web Components, is now registered under its parent row island. Previously it was registered as a top-level row island, so its child grids were missing from the parent row island's child grids and were not cleaned up when the row island was removed.
  • resourceStrings now returns the resource strings of the root grid when none are set on the row island, as documented, instead of the default ones.

• IgcFormControlDirective
  • Added support for igc-color-picker so it can be bound with ngModel and formControlName, in the same way igc-rating is already supported.
• IgxChipComponent
  • Added the outlined property to the component. When set to true, the Chip will have an outlined style.
• Theming
  • 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.
  • The grid-summary-theme properties $border-width and $pinned-border-width were removed, along with their --ig-grid-summary-border-width and --ig-grid-summary-pinned-border-width CSS custom properties. A summary cell takes its border width from the grid itself - grid-theme's $header-border-width for the cell separator and $pinned-border-width for the pinned border - so a summary border can no longer be thicker or thinner than the column border it continues. The border styles and colors stay themable: $border-style, $pinned-border-style, $border-color and $pinned-border-color, and their CSS custom properties, are unchanged. The ng update migration for 22.2.0 drops the removed arguments from existing grid-summary-theme(...) calls and renames the CSS custom properties to the grid ones that now drive them - note that those grid properties style the grid's own borders too, so review the result where a summary-only width was set.
  • 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.