20.0.0

General

• Angular 20 Compatibility - Ignite UI for Angular now plays nice with Angular 20! Upgrade your apps and enjoy the latest features.
• IgxActionStrip
  • Behavioral Changes - When using the Action Strip standalone, outside of Grid, scenarios the component is no longer initially visible and the hidden property now defaults to true.
• IgxChip
  • Behavioral Change The variant is now strictly typed with the union of supported options and no longer accepts invalid values for the default state, provide no value (nullish) instead is needed.

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid
  • Added a new igxGridEmpty template directive that allows assigning the emptyGridTemplate declaratively, without the need to get and assign reference, like other grid templates like:

    <igx-grid>
      <ng-template igxGridEmpty>
        <!-- content to show when the grid is empty -->
      </ng-template>
    </igx-grid>

  • Added a new igxGridLoading template directive that allows assigning the loadingGridTemplate declaratively, without the need to get and assign reference, like other grid templates like:

    <igx-grid>
      <ng-template igxGridLoading>
        <!-- content to show when the grid is loading -->
      </ng-template>
    </igx-grid>

What's Changed

• fix(data-analysis): charts update functionality and extras update by @dobromirts in #3612
• fix(data-analysis): charts update functionality and extras update by @dobromirts in #3614
• chore(*): update extras package version by @dobromirts in #3615
• chore(*): update extras package version by @dobromirts in #3617
• fix(ci): changing the evaluation for running repositoryfy by @ChronosSF in #3622
• fix(grid): rename iconNames in custom filtering operands demos by @teodosiah in #3620
• fix(ci): solving issue with mismatching theming v by @ChronosSF in #3625
• fix(ci): fixing the gulp task for repositorify by @ChronosSF in #3626
• fix(*): attempting to fix gulp file by @ChronosSF in #3627
• fix(transaction): add IgxTransactionService provider in the Transaction demo by @teodosiah in #3624
• chore(cd): attempting to get logging by @ChronosSF in #3628
• chore(*): more logging tt by @ChronosSF in #3629
• fix(overlay): fix combo binding in overlay styling demo by @teodosiah in #3621
• chore(*): adding another todo by @ChronosSF in #3632
• chore(ci): fixing issue in yml by @ChronosSF in #3633
• chore(*): check what the variable is set to by @ChronosSF in #3634
• chore(ci): try this ways of setting by @ChronosSF in #3635
• fix(*): removing leftover todos by @ChronosSF in #3636
• feat(ssr): adding ssr to all projects by @kdinev in #3597
• fix(*): try to use preservecred for git push by @ChronosSF in #3638
• chore(*): fixing wrong command by @ChronosSF in #3639
• fix(dock-manager): add additionalAdjustments to app config by @ddaribo in #3609
• feat(carousel-animations): add vertical property switch by @RivaIvanova in #3642
• fix(*): trying suggestion with pat by @ChronosSF in #3643
• fix(cd): making variables work by @ChronosSF in #3644
• fix(cd): moving to script line for env by @ChronosSF in #3645
• fix(cd): adding a rename step for new index.html name by @ChronosSF in #3647
• refactor(grid-samples): update grid summary styling samples by @simeonoff in #3640
• fix(cd): changing vnext module branch and addin push nonerror by @ChronosSF in #3649
• fixating version to 19.1.3 for time being by @ChronosSF in #3650
• QB sample requesting data from an endpoint by @gedinakova in #3648
• updating vnext with changes done only in master by @ChronosSF in #3652
• fix(grid-custom-filtering): samples not building by @simeonoff in #3653
• fix(*): reverting wrongly changed files by @ChronosSF in #3654
• Updating prod with vnext changes by @ChronosSF in #3651
• fix(cd): updating webconfig for iis and ssr by @ChronosSF in #3656
• fix(cd): improving the porcelain command by @ChronosSF in #3657
• updating prod to resolve ssr issue by @ChronosSF in #3658
• fix(*): disabling ssr for the time being by @ChronosSF in #3659
• Updating master with ssr removal by @ChronosSF in #3660
• Adding a sample for Tile Manager by @gedinakova in #3662
• feat(query-builder): add SQL query sample by @igdmdimitrov in #3631
• feat(list): add the new "selected" property to samples by @adrianptrv in #3646
• feat(list): add the new "selected" property to samples (vnext) by @adrianptrv in #3663
• Releasing new qb and tile manager samples on prod. by @ChronosSF in #3664
• feat(ci): upping v to newest patch by @ChronosSF in #3665
• Updating to strict version by @ChronosSF in #3666
• refactor(card): remove old classes by @SisIvanova in #3668
• refactor(card): remove old classes by @SisIvanova in #3670
• feat(*): updating to 19.2 by @ChronosSF in #3669
• feat(h-grid): update samples with adv filtering subqueries by @igdmdimitrov in #3671
• Updating production with latest staging changes by @ChronosSF in #3672
• fix(query-builder): fix columns hidden when return fields is '*' by @igdmdimitrov in #3676
• Update query builder samples on production by @gedinakova in #3677
• Update query-builder-request-sample.component.ts by @hanastasov in #3680
• fix(QB): Update query-builder-request-sample.component.ts by @gedinakova in #3681
• V20 update by @damyanpetev in #3685
• chore(extras): add override for licensed package as well by @damyanpetev in #3687
• Extras override fix by @damyanpetev in #3688
• chore: update to official 20 by @Lipata in #3689
• fix(QB): Update query-builder-request-sample.component.ts (#3681) by @gedinakova in #3682

Full Changelog: 19.1.0...20.0.0

19.1.0

General

• IgxCarousel
  • Behavioral Changes - the maximumIndicatorsCount input property now defaults to 10.
  • Deprecation - CarouselIndicatorsOrientation enum members top and bottom have been deprecated and will be removed in a future version. Use start and end instead.

New Features

• IgxBanner
  • Introduced a new expanded input property, enabling dynamic control over the banner's state. The banner can now be programmatically set to expanded (visible) or collapsed (hidden) both initially and at runtime. Animations will trigger during runtime updates — the open animation plays when expanded is set to true, and the close animation plays when set to false. However, no animations will trigger when the property is set initially.
  • The banner's event lifecycle (opening, opened, closing, closed) only triggers through user interactions (e.g., clicking to open/close). Programmatic updates using the expanded property will not fire any events.
  • If the expanded property changes during an ongoing animation, the current animation will stop and the opposite animation will begin from the point where the previous animation left off. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and expanded is set to false, the close animation (5 seconds) will start from its 3rd second.
• IgxQueryBuilder has new design that comes with updated appearance and new functionality
  • IgxQueryBuilderComponent
    • Introduced the ability to create nested queries by specifying IN/NOT IN operators.
    • Introduced the ability to reposition condition chips by dragging or using Arrow Up/Down.
    • Added the entities property that accepts an array of EntityType objects describing an entity with its name and an array of fields. The fields input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
    • Added disableEntityChange property that can be used to disable the entity select on root level after the initial selection. Defaults to false.
    • Added disableReturnFieldsChange property that can be used to disable the fields combo on root level. Defaults to false.
    • Added the canCommit, commit and discard public methods that allows the user to save/discard the current state of the expression tree.
    • Added option to template the search value input:

      <ng-template igxQueryBuilderSearchValue 
                  let-searchValue
                  let-selectedField = "selectedField" 
                  let-selectedCondition = "selectedCondition"
                  let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
          @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
              <input type="text" required [(ngModel)]="searchValue.value"/>
          } @else {  
              <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
          }
      </ng-template> 
      

    • Behavioral Changes
    • Expression enters edit mode on single click, Enter or Space.
    • Selecting conditions inside the IgxQueryBuilderComponent is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
    • Deleting multiple expressions through the context menu is no longer supported.
  • IgxQueryBuilderHeaderComponent
    • Behavioral Change
    • Legend is no longer shown.
    • If the title input property is not set, by default it would be empty string.
    • Deprecation
    • The showLegend and resourceStrings input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
• IFilteringExpression
  • A new optional property called conditionName has been introduced. This would generally be equal to the existing condition.name.
• IFilteringOperation
  • A new optional property called isNestedQuery has been introduced. It's used to indicate whether the condition leads to a nested query creation.

19.0.0

General

• IgxFilteringService, IgxGridBaseDirective
  • Deprecation The filterGlobal method has been deprecated and will be removed in a future version.

New Features

• IgxColumn
  • Introduced the disabledSummaries property, allowing users to specify which summaries should be disabled for a given column. This property accepts an array of strings corresponding to the summary keys, enabling selective control over both default summaries (e.g., 'Count', 'Min') and any custom summaries created by the user.

18.2.0

18.2.0

General

• IFilteringExpressionsTree, FilteringExpressionsTree
  • Deprecation The find and findIndex methods have been deprecated and will be removed in a future version. A ExpressionsTreeUtil class has been added which provides the same functionality.

New Features

• IgxSimpleCombo
  • Introduced ability for Simple Combo to automatically select and retain valid input on "Tab" press enhancing user experience by streamlining data entry and reducing the need for manual selection improving form navigation.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • To streamline the sorting of columns with custom formats, a new FormattedValuesSortingStrategy has been introduced. This strategy simplifies the sorting process by allowing direct sorting based on formatted values, eliminating the need to extend the DefaultSortingStrategy or implement a custom ISortingStrategy. This enhancement improves the ease of handling sorting with custom column formatters.
• IgxCarousel
  • Added support for vertical alignment. Can be configured via the vertical property. Defaults to false.
  • Added support for showing/hiding the indicator controls (dots). Can be configured via the indicators property. Defaults to true.
• ColumnType, IgxColumn
  • The built-in editors for columns of type date, dateTime and time now use a default input format as per the IgxGrid's locale. This is valid both for cell editors and the ones in the filtering UI for all modes - quickFilter, excelStyle and the Advanced filtering.
  • In case the pipeArgs.displayFormat property of a date-time column is set and contains only numeric date-time parts or such that can be handled by the editors, the built-in editors input format is inferred from it.
  • To configure the built-in editors, a new editorOptions property is added that allows to pass optional parameters. Accepts an IColumnEditorOptions object with the dateTimeFormat property, that is used as input format for the editors of
    date, dateTime and time column data types:

        const editorOptions: IColumnEditorOptions = { Field?
            dateTimeFormat: 'MM/dd/YYYY',
        }

        <igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>

• FieldType (IgxQueryBuilder)
  • Similar to the above, the fields now accept an editorOptions object of type IFieldEditorOptions. Its dateTimeFormat property is used as input format for the query editors of date-time fields.
• IgxDateTimeEditor, IgxDatePicker, IgxTimePicker, IgxDateRangePicker
  • In case the inputFormat property is not set, the input format is inferred from
    displayFormat if set and if it contains only numeric date-time parts.
• IgxTimePicker
  • The input and display formats are now adjusted based on the locale. For instance, day period time part (AM/PM or a/p) would not be displayed for locales that do not require it.
• IgxDateTimeEditor
  • Added a new defaultFormatType property (date | time | dateTime) which configures the date-time parts
    according to the target type that the editor mask includes. Defaults to date.
• IgxTabs
  • Added activation property to control tab selection. In auto mode (default), tabs are selected instantly with Arrow or Home/End keys. In manual mode, tabs are focused with keys but only selected with Enter or Space.
• IgxGridState
  • When possible the state directive nows reuses the column that already exists on the grid when restoring the state, instead of creating new column instances every time. This removes the need to set any complex objects manually back on the column on columnInit. The only instance where this is still necessary is when the column (or its children in case of column groups) have no field property so there's no way to uniquely identify the matching column.
  • Added support for persisting Multi-Row Layout.

Themes

• Breaking Change Palettes

  • All palette colors have been migrated to the CSS relative colors syntax. This means that color consumed as CSS variables no longer need to be wrapped in an hsl function.

  Example:

  /* 18.1.x and before: */
  background: hsl(var(--ig-primary-600));
  
  /* 18.2.0+: */
  background: var(--ig-primary-600);

  This change also opens up the door for declaring the base (500) variants of each color in CSS from any color, including other CSS variables, whereas before the Sass palette function was needed to generate color shades from a base color.

  Example:

  /* 18.1.x and before: */
  $my-palette: palette($primary: #09f, ...);
  
  /* 18.2.0+: */
  --ig-primary-500: #09f;

  This change adds to our continuous effort to make theming configurable in CSS as much as it is in Sass.

Scrollbar: New CSS variables

We have introduced new CSS variables to allow for more customizable scrollbars. This enhancement utilizes the available WebKit pseudo-selectors such as ::-webkit-scrollbar-track. However, please note that these pseudo-selectors are prefixed with -webkit- and are only supported in WebKit-based browsers (e.g., Chrome, Safari).

List of Available CSS Variables for -webkit- browsers:

• --sb-size: Adjusts the scrollbar size (width and height).
• --sb-track-bg-color: Sets the background color of the scrollbar track.
• --sb-track-bg-color-hover: Sets the background color of the scrollbar track on hover.
• --sb-thumb-min-height: Sets the minimum height of the scrollbar thumb.
• --sb-thumb-border-radius: Sets the border radius of the scrollbar thumb.
• --sb-thumb-border-size: Sets the border size of the scrollbar thumb.
• --sb-thumb-border-color: Sets the border color of the scrollbar thumb.
• --sb-thumb-bg-color: Sets the background color of the scrollbar thumb.
• --sb-thumb-bg-color-hover: Sets the background color of the scrollbar thumb on hover.

For Firefox users, we provide limited scrollbar styling options through the following CSS variables:

• --sb-size: Adjusts the scrollbar size.
• --sb-thumb-bg-color: Sets the background color of the scrollbar thumb.
• --sb-track-bg-color: Sets the background color of the scrollbar track.

General

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, IgxPivotGrid

  • Deprecation The shouldGenerate property has been deprecated and will be removed in a future version. Column re-creation now relies on autoGenerate instead. Automatic migration to this is available and will be applied on ng update. Note that if autoGenerate is already set initially, there is no need to explicitly set it elsewhere in your code.

• IgxCarousel

  • animationType input property is now of type CarouselAnimationType. HorizontalAnimationType can also be used, however, to accommodate the new vertical mode, which supports vertical slide animations, it is recommended to use CarouselAnimationType.

  • Behavioral Changes - the keyboardSupport input property now defaults to false.

  • Deprecation - the keyboardSupport input property has been deprecated and will be removed in a future version. Keyboard navigation with ArrowLeft, ArrowRight, Home, and End keys will be supported when focusing the indicators' container via Tab/Shift+Tab.

• IgxCombo:

  • Breaking Change The deprecated filterable property is replaced with disableFiltering.
  • The dropdown search field placeholder is now part of the Combo's localization resources. It now also uses two resource values depending on whether filtering is active, e.g. in the default en locale it remains 'Enter a Search Term', but changes to 'Add Item' when disableFiltering and allowCustomValues are set to true. For that reason, the existing searchPlaceholder input is also deprecated in favor of the resources.
  • Deprecation - filterable from the filteringOptions has been deprecated in favor of disableFiltering.

• IgxBadge

  • Breaking Change The $border-width property has been removed from the badge theme.
  • New outlined variant of the badge component has been added. Users can switch to outlined by adding the newly created outlined property to a badge.

18.1.0

Release Highlights

New Features

• IgxPivotGrid
  • Added horizontal layout for row dimensions. Can be configured through the pivotUI rowLayout property.
  • Added horizontalSummary property for each IPivotDimension, enabling summary row when using horizontal layout.
  • Added horizontalSummariesPosition property to the pivotUI, configuring horizontal summaries position.
  • Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
  • Added keyboard interactions for row dimension collapse using Alt + Arrows and row headers sorting using Ctrl + Arrow Up/Down.
• IgxIcon, IgxIconService
  • You can now register icons by reference via the IgxIconService. To learn more check out the Icon Service documentation.
  • All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
  • registerFamilyAlias has been deprecated in favor of setFamily to allow adding metadata for type and prefix when registering custom icon families. To migrate from registerFamilyAlias, do the following:

        this.iconService.registerFamilyAlias('my-family', 'my-family-class');
        this.iconService.setFamily('my-family', { className: 'my-family-class' });

General

• ColumnType, IgxColumn, IgxColumnGroup, IgxColumnLayout
  • The children query property has been deprecated and replaced by childColumns getter directly returning columns array.
  • Several properties have been hidden from the public API, considered internal and not recommended for use. Those include:
    filterCell, headerCell, headerGroup, defaultMinWidth, gridRowSpan, gridColumnSpan and cells.
• IgxPaginator
  • The isFirstPageDisabled and isLastPageDisabled have been deprecated in favor of the identical isFirstPage and isLastPage getter.
• IgxOverlayService
  • The attach method overload accepting Type and OverlaySettings now accepts OverlayCreateSettings as second parameter. This interface extends OverlaySettings with an additional injector property used as ElementInjector when creating the dynamic component.

18.0.0

New Features

• IgxCombo, IgxSimpleCombo:
  • Introduced ability for hiding the clear icon button when the custom clear icon template is empty.
• IgxDateTimeEditor, IgxTimePicker:
  • Now accept the following custom inputFormat options, as Angular's DatePipe:
    • Fractional seconds: S, SS, SSS.
    • Period (Am/Pm): a, aa, aaa, aaaa, aaaaa
• IgxPivotGrid
  • Added templatable row dimension headers displayed on the top, above all row headers.
  • Replace the showPivotConfigurationUI property with pivotUI property, adding ability now to enable/disable the configuration UI and/or the new row dimension headers.
  • Added sortable property for each IPivotDimension.
• IgxOverlayService, IgxToggleDirective:
  • Added an optional offsetMode parameter to the setOffset method that determines whether to add (by default) or set the offset values using OffsetMode.Add and OffsetMode.Set.

Changes

• With the removal of the Display Density token, components now get their default sizes from the theme. Default sizes have changed for most components, with it now being medium (previously large). Here's an exhaustive list of all sizable components and their default sizes by theme:
  • Avatar - Small (All Themes)
  • Button - Large (Material), Medium (Bootstrap, Fluent, Indigo)
  • Button Group - Large (Material), Medium (Bootstrap, Fluent, Indigo)
  • Card - Medium (All Themes)
  • Combo - Medium (All Themes)
  • Chip - Medium (All Themes)
  • Date/Time Picker - Medium (All Themes)
  • Dropdown - Medium (All Themes)
  • Dialog - Medium (All Themes)
  • Icon - Large (All Themes)
  • Icon Button - Large (Material), Medium (Bootstrap, Fluent, Indigo)
  • Input Group - Medium (All Themes)
  • List - Medium (All Themes)
  • Tree - Medium (All Themes)
  • Rating - Medium (All Themes)
  • Select - Medium (All Themes)

General

• Removed deprecated property displayDensity. Size is now controlled only through the custom CSS property --ig-size. Refer to the Update Guide and components documentation for usage details.
• IgxBanner
  • Removed the deprecated banner property of BannerEventArgs and BannerCancelEventArgs. Automatic migration to owner is applied.
• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Removed the deprecated movable property of IgxColumnComponent.
• IgxOverlayService
  • Removed the deprecated PositionSettings.target (in favor of general OverlaySettings.target).
  • Replaced deprecated attach method overload accepting ComponentFactoryResolver (trough NgModuleRef-like object) with shortcut overload that uses just the root scope and createComponent. The overload accepting ViewComponentRef is still recommended for local injection context.
• IgxPivotGrid
  • The IgxPivotDateDimension deprecated getters inBaseDimension and inOption have been removed.
• IgxSimpleCombo
  • Behavioral Change When bound to ngModel and formControlName directives, the model would not be updated when the user types into the input and will only be updated on selection.

16.0.0

16.0.0

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. 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.

  Now you can do:

  // IGX_GRID_DIRECTIVES exports all grid related components and directives
  import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IGX_GRID_DIRECTIVES, AsyncPipe]
  })

  or

  // Single import of only the <igx-grid> component.
  import { IgxGridComponent } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IgxGridComponent, AsyncPipe]
  })

  or still

  // `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.
  import { IgxGridModule } from 'igniteui-angular';
  
  @Component({
      selector: 'app-grid-sample',
      styleUrls: ['grid.sample.scss'],
      templateUrl: 'grid.sample.html',
      standalone: true,
      imports: [IgxGridModule, AsyncPipe]
  })

• 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.

• IgxGrid, 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, IgxTreeGrid, IgxHierarchicalGrid

  Breaking Changes: The following grid properties, deprecated since version 12.1.0 are now removed:

  • evenRowCSS;
  • oddRowCSS;
  • page;
  • paging;
  • perPage;
  • totalPages;
  • isFirstPage;
  • isLastPage;

  Also the following deprecated grid events are removed.

  • pageChange;
  • perPageChange;
  • pagingDone;

  Deprecated methods removed from the grid API are:

  • nextPage;
  • previousPage;
  • paginate;
  • getCellByColumnVisibleIndex;

New Features

• IgxChip
  • New input variant which can take any of the following values: 'primary', 'info', 'success', 'warning', 'danger'
• IgxExpansionPanel:
  • IgxExpansionPanelTitleDirective and IgxExpansionPanelDescriptionDirective show tooltip of the provided text content.
• IgxDateRangePicker
  • Added showWeekNumbers input that toggles whether or not the number of a week will be visible next to it
• IgxGrid, IgxHierarchicalGrid:
  • totalItemCount can now also be bound as Input in remote virtualization scenarios.
  • rowExpandedIndicatorTemplate, rowCollapsedIndicatorTemplate, headerExpandedIndicatorTemplate, 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>
• Util
  • Added new CachedDataCloneStrategy that allows for cloning object with circular references.

15.1.0

Upgrade to the latest igniteui-angular version 15.1.0

15.1.0

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid:
  • GroupMemberCountSortingStrategy is 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 that 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 is introduced - the event is emitted before the content is appended to the overlay. The event is emitted with OverlayEventArgs arguments and is not 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.
• 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, IgxHierarchicalGrid
  • Breaking Change - rowSelectionChanging event arguments are 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.
• IgxRadio, IgxRadioGroup, IgxCheckbox, IgxSwitch
  • Added component validation along with styles for invalid state
• igxMask directive
  • Added the capability to escape mask pattern literals.
• IgxBadge
  • Added 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 square, rounded or circle. 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 is added accepting ViewComponentRef that should be used instead.
• Breaking Changes - $label-floated-background and $label-floated-disabled-background properties of IgxInputGroupComponent theme has been removed.
• 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 are 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.

15.0.0

15.0.0

New Features

• igxGrid - exposing 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)

  • excelStyleHeaderIconTemplate - Gets/Sets the 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 <igx-grid-toolbar-title> and <igx-grid-toolbar-actions> 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 displays the number of the defined columns.

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • Behavioral Change - When editing a row, rowChangesCount and hiddenColumnsCountwould 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.
  • Columns of type currency will be formatted as currency in 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, IgxPivotGrid

  • Adding 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.

14.2.0

New samples and functionalities based on the Ignite UI Angular upgrade to 14.2.

Release notes
Blog

New 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 allows changing the displayed strings.

  • Code example below:

  <igx-query-builder [fields]="fields">
      <!-- Custom header -->
      <igx-query-builder-header [title]="'Custom title'"
          [showLegend]="false">
      </igx-query-builder-header>
  </igx-query-builder>

  • For more information, check out the README, specification and official documentation.

• IgxExcelExporterService

  • Added support for exporting igxPivotGrid.

General

• Breaking Changes - The Excel exporter service exportEnded event has its 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. The same structure is used to package as a zip file by fflate's API.
• IgxDropDown
  • The aria-label attribute of the IgxDropDownItemBase can now be se to a custom value for its descendants (of which IgxDropDownItem) by the ariaLabel property.