Features

• Themes
  • Experimental - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.

Features

• IgxSelect
  • The select component now has the ability to handle igxPrefix and igxSuffix directives inside igx-select-item.
• IgxBadge
  • Material icons extended along with any other custom icon set can now be used inside the badge component.
• IgxCombo
  • Exposed comboIgnoreDiacriticsFilter filter function which normalizes diacritics to their base representation. When the combo components are configured with it, filtering for "resume" will match both "resume" and "résumé".
• IgxCombo and IgxSimpleCombo
  • Added new displayValue property which returns array of display keys.
• Themes
  • You can now include a standalone theme for the igxLabel directive to allow usage with components outside the Input Group.
  • Changing the size of Ignite UI components can now be done via a new custom CSS property - --ig-size. The DisplayDensityToken injection token and consequently, the displayDensity inputs for all components will be deprecated in the next major version and it is recommended that they no longer be used for sizing components.
• IgxStepper
  • Breaking Change - The IgxStepSubTitleDirective has been renamed to IgxStepSubtitleDirective. Automatic migrations are available and will be applied on ng update.
• IgxGrid, IgxTreeGrid and IgxHierarchicalGrid
  • The draggable attribute is no longer required to be set on interactable elements, if a column header is templated and 'Column Moving' is enabled in order for handlers for any event to be triggered. draggable='false' can now be used as an addition if the user shouldn't be able to drag a column by that element, but even if omitted click events for example will trigger now.
  • Behavioral Change - When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
• IgxCombo and IgxSimpleCombo
  • Added new displayValue property which returns an array of display keys.
  • Breaking Change - The selection property returns an array of the selected items even when a value key is provided and the value property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on ng update.
• IgxButtonGroup
  • Added owner to the IButtonGroupEventArgs to identify the emitting button group instance.
  • Breaking Change - Added the selectionMode property that sets the selection mode of the buttons in the IgxButtonGroup. Selection modes are single, singleRequired and multi as default is single.
• Deprecation - The DisplayDensityToken injection token has been deprecated. Consequently, the displayDensity input for all components injecting the DisplayDensityToken is also deprecated. Changing the size of the component(s) should be done via a new custom CSS property - --ig-size.

Features

• Added support for Angular 16.
• Updated the design of the ComboBox component.

Features

• IgxExpansionPanel
  • IgxExpansionPanelTitleDirective and IgxExpansionPanelDescriptionDirective now show the tooltip of the provided text content.
• IgxDateRangePicker
  • Added showWeekNumbers input which toggles whether or not the week number will be visible.
• IgxGrid and IgxHierarchicalGrid
  • totalItemCount can now also be bound as Input in remote virtualization scenarios.
  • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate and headerCollapsedIndicatorTemplate can now also be bound as Input to provide templates for the row and header expand/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.
• IgxPivotGrid
  • Added pivotConfigurationChanged event triggered any time any of pivotConfiguration properties is changed via the UI.
• ISortingExpression now accepts an optional generic type parameter for type narrowing of the fieldName property to keys of the data item, e.g. ISortingExpression<MyDataItem>.
• IgxChip
  • Behavioral Change - The igxChip styles have been revisited and the select container animation has been removed when selecting/deselecting a chip.
  • Behavioral Change - The remove button behavior have been revisited, now when the chip is in disabled state the remove button is hidden.
  • The igxChip has a new input variant which can take any of the following values:
    • 'primary'.
    • 'info'.
    • 'success'.
    • 'warning'.
    • 'danger'.
• Util
  • Added new CachedDataCloneStrategy which allows for cloning an object with circular references.
• General
  • All Ignite UI for Angular components are now exported as standalone components. The library still exports NgModules, which have been preserved for backward compatibility, but they no longer declare any of the Ignite UI for Angular components, instead they just import and export the standalone components.
    • NOTE: The standalone components are still in a preview stage. Some utility directive exports may change in the future and may be missing from the documentation in the initial release, hence the preview state of the feature.
• IgxGrid and IgxHierarchicalGrid
  • Breaking Change - The IgxHeaderExpandIndicatorDirective and IgxHeaderCollapseIndicatorDirective directives, as well as the headerExpandIndicatorTemplate and headerCollapseIndicatorTemplate properties have been renamed to IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate and headerCollapsedIndicatorTemplate respectively to properly reflect their purpose. Automatic migrations are available and will be applied on ng update.
• IgxGrid, IgxTreeGridand IgxHierarchicalGrid
  • Breaking Changes
    • The following grid properties, deprecated since version 12.1.0, have been removed:
      • evenRowCSS.
      • oddRowCSS.
      • page.
      • paging.
      • perPage.
      • totalPages.
      • isFirstPage.
      • isLastPage.
      • pageChange.
    • The following deprecated grid events have been removed:
      • perPageChange.
      • pagingDone.
    • The following deprecated methods have been removed from the grid API:
      • nextPage.
      • previousPage.
      • paginate.
      • getCellByColumnVisibleIndex.

Features

• IgxInputGroupComponent
  • The input group has been refactored so that the floating label for the input of type="border" does not require a background to match the surface background under the input field. Also, suffixes and prefixes have been refactored to take the full height of the input which makes it easy to add background to them.
  • Breaking Changes - $size property of scrollbar-theme theme has been renamed to $scrollbar-size.
  • Breaking Changes - $label-floated-background and $label-floated-disabled-background properties of IgxInputGroupComponent theme has been removed.

Features

• IgxGrid, IgxTreeGrid and IgxHierarchicalGrid
  • GroupMemberCountSortingStrategy has been added which can be used to sort the grid by number of items in each group in ASC or DESC order, if grouping is applied.
  • A new argument primaryKey has been introduced to IRowDataEventArgs Interface and part of the event arguments that are emitted by the rowAdded and rowDeleted events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined.
  • Added the autoGenerateExclude property which accepts an array of strings for property names that are to be excluded from the generated column collection.
• IgxColumnComponent
  • Added currRec and groupRec parameters to the groupingComparer function that give access to the all properties of the compared records.
• IgxOverlayService
  • A new event contentAppending has been introduced - the event is emitted before the content is appended to the overlay. The event is emitted with OverlayEventArgs arguments and is not cancelable.
• IgxCard
  • Buttons and icons slotted in the igx-card-actions can now be explicitly arranged to the start/end of the layout. To position components on either side users can take advantage of the newly added directives:
    • igxStart - aligns items to the start.
    • igxEnd - aligns items on the end of the card actions area.
  • The reverse property has been deprecated and will be removed in a future version
• IgxButtonGroup
  • The selected and deselected events are now cancellable.
• General
  • IgxPivotGrid
    • The IgxPivotDateDimension properties inBaseDimension and inOption have been deprecated and renamed to baseDimension and options respectively.
  • IgxGrid
    • Breaking Change - The onGroupingDone output has been renamed to groupingDone to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
    • Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
  • DisplayDensity
    • Breaking Change - The onDensityChanged output has been renamed to densityChanged to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on ng update.
  • IgxGrid, IgxTreeGrid and IgxHierarchicalGrid
    • Breaking Change - rowSelectionChanging event arguments have been changed. Now the oldSelection, newSelection, added and removed collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted. When the grid is working with remote data and a primary key has been set- for the selected rows that are not currently part of the grid view, will be emitted a partial row data object.
    • Behavioral Change - When selected row is deleted from the grid component rowSelectionChanging event will no longer be emitted.
  • IgxCarousel
    • Breaking Change - The onSlideChanged, onSlideAdded, onSlideRemoved, onCarouselPaused and onCarouselPlaying outputs have been renamed to slideChanged, slideAdded, slideRemoved, carouselPaused and carouselPlaying to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update.
  • IgxRadiov IgxRadioGroup, IgxCheckbox and IgxSwitch
    • Added component validation along with styles for invalid state.
  • IgxMask directive
    • Added the ability to escape mask pattern literals.
  • IgxBadge
    • Added new shape property that controls the shape of the badge and can be either square or rounded. The default shape of the badge is rounded.
  • IgxAvatar
    • Breaking Change - The roundShape property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added shape attribute that can be either square or rounded. The default shape of the avatar is square.
  • IgxOverlayService
    • attach method overload accepting ComponentFactoryResolver (trough NgModuleRef-like object) is now deprecated in line with API deprecated in Angular 13. New overload has been added accepting ViewComponentRef that should be used instead.

Fixes

• IgxSimpleCombo
  • The IgxSimpleCombo will not open its drop-down on clear.

Features

• Added support for Angular 15.

Features

• IgxGrid
  • Added new auto-sizing API 'recalculateAutoSizes' that recalculates column widths that have size set to auto. Can be used in scenarios where you want to auto-size columns post initialization.
• igxPivotGrid
  • Added 'aggregatorName' for pivot value configuration as an alternative to setting aggregator function. If both are set 'aggregatorName' takes precedent. If none are set an error is thrown.
• IgxSimpleCombo
  • Behavioral Change
    • When the user clicks on the combo's input, the dropdown now opens up.
    • Keyboard navigation ArrowUp - When the combo is opened ArrowUp will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise ArrowUp will move to the previous list item.

Features

• igxGrid
  • Exposed new Input properties:
    • Parameters in grid templates now have types for their context. This can also cause issues if the app is in strict template mode and uses the wrong type. References to the template that may require conversion:
      • IgxColumnComponent - ColumnType (for example the column parameter in igxFilterCellTemplate).
      • IgxGridCell - CellType (for example the cell parameter in igxCell template).
    • A new groupRecord parameter has been exposed in operate method, that is an IGroupByRecord object describing the grouped row in case grouping is applied.
    • excelStyleHeaderIconTemplate - Gets/Sets the Microsoft Excel style header icon.
    • groupRowTemplate - Gets/Sets the template reference for the group row.
    • headSelectorTemplate - Gets/Sets the header row selector template.
    • rowSelectorTemplate - Gets/Sets the custom template used for row selectors.
    • groupByRowSelectorTemplate - Gets/Sets the custom template used for the group row selectors.
    • sortHeaderIconTemplate - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are not sorted.
    • sortAscendingHeaderIconTemplate - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in asc order.
    • sortDescendingHeaderIconTemplate - Gets/Sets a custom template that should be used when rendering a header sorting indicator when columns are sorted in desc order.
    • rowEditActionsTemplate - Gets/Sets the row edit actions template.
    • rowAddTextTemplate - Gets/Sets the row add text template.
    • rowEditTextTemplate - Gets/Sets the row edit text template.
    • dragGhostCustomTemplate - Gets/Sets the custom template used for row drag.
    • dragIndicatorIconTemplate - Gets/Sets the custom template used for row drag indicator.
    • detailTemplate - Gets/Sets the master-detail template.
• IgxGridToolbar
  • Breaking Change - The IgxGridToolbarTitleDirective and IgxGridToolbarActionsDirective have been converted to components, keeping only the element selector.
    • For apps using the preferred element markup of and there should be no functional change.
    • Apps using the igxGridToolbarTitle and igxGridToolbarActions directives on other elements will need to convert those to the mentioned elements instead.
  • Behavioral Change - When adding new row in grid with enabled batch editing, rowChangesCount now displays the number of the defined columns.
• IgxGrid, IgxTreeGrid and IgxHierarchicalGrid
  • Behavioral Change - When editing a row, rowChangesCount and hiddenColumnsCount would be displayed.
  • Behavioral Change - The Grid Paginator component is no longer hidden when there's no data and/or all columns are hidden.
• IgxExcelExporterService
  • Added support for exporting grid summaries.
  • Currency type columns will now be formatted as currency in Microsoft Excel based on grid's locale. Locale currency different than USD, EUR, GBP, CNY or JPY will result in exporting the column as number instead.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid and IgxPivotGrid
  • Added Image column data type.
• IgxCalendar
  • Added support for shift key + mouse click interactions.
    • multi mode - select/deselect all dates between the last selected/deselected and the one clicked while holding Shift.
    • range mode - extend/shorten the range from the last selected date to the one clicked while holding Shift.
• IgxFilterOptions
  • Added support for multiple keys.

Features

• The filtering logic inside the grid's Advanced Filtering is now extracted as a separate IgxQueryBuilder component. The Query Builder allows you to build complex queries by specifying AND/OR operators, conditions and values using the UI. It outputs an object describing the structure of the query. Use the locale property to modify the locale settings. The default value is resolved to the global Angular application locale. The resourceStrings allow you to change the displayed strings.
• IgxExcelExporterService
  • Added support for exporting igxPivotGrid.
• General
  • Breaking Changes - The Microsoft Excel exporter service exportEnded event has had it's XLSX argument type changed as igniteui-angular no longer depends on JSZip. Instead of providing a JSZip instance it is now an object describing the structure of the Excel file with property names corresponding to folders or files, folders being objects themselves that can be traversed down, while files have their contents as Uint8Array.
  • IgxDropDown
    • The aria-label attribute of the IgxDropDownItemBase can now be set to a custom value for its descendants (of which IgxDropDownItem) by the ariaLabel property.

Features

igxPivotGrid

• Added the option to template pivot value chip content.
• Angular Pivot Grid State Persistence - Тhe igxGridState directive allows developers to easily save and restore the grid state. When the IgxGridState directive is applied on the grid, it exposes the getState and setState methods that developers can use to achieve state persistence in any scenario. IgxGridState directive supports saving and restoring the state of the following features:
  • Sorting.
  • Filtering.
  • Cell Selection.
  • Row Selection.
  • Column Selection.
  • Expansion.

IgxCombo and IgxSimpleComboComponent

• Added new filterFunction input property. The new property allows you to change the way filtering is done in the combos.
• filteringOptions have been extended and now contains filterable and filteringKey properties.
• Breaking Changes - filterable property of IgxComboComponent has been deprecated and will be removed in a future version. Use filteringOptions.filterable instead.

IgxGridStateDirective

• Added support for restoring filtering expressions with custom filtering operands.

igxGrid

• Added built-in validation mechanism for Grid editing.
• Added the ability to auto-size columns to the size of their cells and header content on initialization by setting width as auto.

IgcFormControl

• Added IgcFormControl directive that, when imported with its IgcFormsModule, is designed to seamlessly attach to form components from the Ignite UI for WebComponents package and allows using them in Angular templates and reactive forms with support for ngModel and formControlName directives. Currently the only Web Component with support through the directive is igc-rating.

Features

General

• Added support for Angular 14.

Migrations

• Migrations now support Yarn berry (version 2+).

IgxGridEditingActions

• Added new inputs to show/hide the edit and delete buttons - editRow, deleteRow.

IgxTabs

• Behavioral Change - Both scroll buttons are now displayed when the tabs are not fully visible. When there is no tabs to be scrolled in one of the directions the corresponding scroll button is now disabled.

Locale settings

• IgxDatePicker and IgxDateRangePicker now expose a weekStart input property like the IgxCalendar.
• IgxCombo and IgxSimpleComboComponent
  • The combobox role, aria-haspopup, aria-expanded, aria-controls and aria-labelledby attributes have been moved from combo wrapper to the combo input.
  • The IgxSimpleComboComponent input is now marked with aria-readonly="false" and aria-autocomplete="list" attributes.
  • The aria-expanded attribute is now applied to the combo dropdown as well and can be set by the ariaLabelledBy property, the combo label or placeholder.
  • The search input within the combo dropdown is now marked as role="searchbox", aria-label="search" and aria-autocomplete="list".
  • The dropdown item container now has aria-activedescendant attribute to identify the currently active element of the item list.
  • The IgxCombo container is now also marked as aria-multiselectable="true".
  • The dropdown header items role has been changed to group.
  • Added new filterFunction input property. The new property allows you to change the way filtering is done in the combos.
• IgxDropDown
  • The label attribute has been changed to aria-labelledby and can be set by a latterly added input property labelledBy.
• IColumnPipeArgs interface now exposes a weekStart property to control the first week of day in calendar used in the grid for editing and filtering.
• locale property of IgxCalendar, IgxDatePicker, IgxDateRangePicker and IgxGrid will now default to global Angular application locale, if not set.
• weekStart property of IgxCalendar, IgxDatePicker, IgxDateRangePicker and IgxGrid will now default to the default first day for the current component locale, if not set.