Skip to content

Releases: IgniteUI/igniteui-angular-samples

18.2.0

25 Oct 10:57
@ChronosSF ChronosSF
18.2.0
e3f4262
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
18.2.0 Latest
Latest

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.
Assets 2
Loading

18.1.0

23 Jul 12:52
@ChronosSF ChronosSF
18.1.0
bcaaaff
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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.
Assets 2
Loading

18.0.0

11 Jun 11:09
@ChronosSF ChronosSF
18.0.0
f750f5d
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.
Compare
Choose a tag to compare
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.
Assets 2
Loading

16.0.0

27 Jun 13:05
@ChronosSF ChronosSF
16.0.0
2cea049
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
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.
Assets 2
Loading

15.1.0

28 Mar 11:44
@zdrawku zdrawku
15.1.0
859cb29
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
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.
Assets 2
Loading

15.0.0

28 Nov 12:47
@ChronosSF ChronosSF
15.0.0
9925e87
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
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.
Assets 2
Loading

14.2.0

06 Oct 13:40
@ChronosSF ChronosSF
14.2.0
ca3b103
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
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>

  • 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.
Assets 2
Loading

14.1.0

14 Sep 08:46
@zdrawku zdrawku
14.1.0
3dac621
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
14.1.0

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

Release notes
Blog

New Features

  • IgxCombo and IgxSimpleComboComponent

    • filterFunction input is added. The new property allows changing of the way filtering is done in the combos. By default filtering is made over the values in combo's data when it is a collection of primitive values, or over the values as defined in displayKey of the combo. If custom filtering function is provided filtering will be done as specified in the provided function.
    • filteringOptions are extended and now contains filterable and filteringKey properties. Setting filterable determines whether combo will be filterable. By default filtering is done over the data value when they are primitive, or over the field of the values equal to displayKey. filteringKey allows to filter data by any data related key.

  • igxPivotGrid

    • Add option to template the pivot value chip content:
    <ng-template igxPivotValueChip let-value>
        {{ value.member }}
</ng-template>
    • Add support for usage with igxGridState to persist state of the pivotConfiguration with an additional pivotConfiguration option:
     <igx-pivot-grid
        #grid1
        [igxGridState]="options" ...
        public options : IGridStateOptions = {
    pivotConfiguration: true
};

    One known issue of the igxGridState directive is that it cannot store functions as the state is stored as string.
    As a result any custom functions set to memberFunction, aggregator, formatter, styles etc. will not be stored. Restoring any of these can be achieved with code on application level.
    Hence we have also exposed 2 new events:
    - dimensionInit - emits when a dimension from the configuration is being initialized.
    - valueInit - emits when a value from the configuration is being initialized.
    Which can be used to set back any custom functions you have in the configuration.
    The default aggregator function, like the ones from IgxPivotNumericAggregate, IgxPivotDateAggregate etc., will be restored out of the box. However if you have any custom aggregators (or other custom functions) they need to be set back in the valueInitevent, for example:

        public onValueInit(value: IPivotValue) {
    if (value.member === 'AmountOfSale') {
        value.aggregate.aggregator = IgxTotalSaleAggregate.totalSale;
    }
}

    Same applies to any custom functions on the dimension, like memberFunction. If it is a custom function you can set it back on the dimensionInit event:

     public onDimensionInit(dim: IPivotDimension) {
    if (dim.memberName === 'AllCities') {
        dim.memberFunction = () => 'All';
    }
}
    • igxGridState:
      Exposed a stateParsed event to the state directive that can be used to additionally modify the grid state before it gets applied.
    this.state.stateParsed.subscribe(parsedState => {
        parsedState.sorting.forEach(x => x.strategy = NoopSortingStrategy.instance());
    });

  • igxGrid

    • Added built-in validation mechanism for Grid Editing. Extends the Angular Form validation functionality
      You can configure it in 2 ways:

      1. Via template-driven configuration on the igx-column of the grid:

        <igx-column required minlength="4" ...>

      2. Via reactive forms using the FormGroup exposed via the formGroupCreated event of the grid:

        <igx-grid (formGroupCreated)='formCreateHandler($event)' ...>
        public formCreateHandler(formGr: FormGroup) {
    // add a validator
    const prodName = formGr.get('UserName');
    prodName.addValidators(forbiddenNameValidator(/bob/i))
}

      Edited cells will enter an invalid state when validation fails and will show an error icon and message. Cell will remain invalid until the value is edited to a valid value or the related state in the validation service is cleared.

      You can refer to the documentation for more details: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/validation

    • Added ability to auto-size columns to the size of their cells and header content on initialization by setting width auto:

    <column width='auto' ...>
    • Added support for restoring filtering expressions with custom filtering operands for the IgxGridStateDirective.

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

Assets 2
Loading

14.0.0

14 Jun 13:08
@ChronosSF ChronosSF
14.0.0
77b50ae
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
14.0.0

Upgrade Ignite UI for Angular samples to 14.0.0 version

What's Changed

Full Changelog: 13.2.0...14.0.0

Contributors

kdinev, ChronosSF, and 3 other contributors
Assets 2
Loading

13.2.0

26 May 07:36
@zdrawku zdrawku
13.2.0
6c9dd41
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.
Compare
Choose a tag to compare
13.2.0

Upgrade Ignite UI for Angular samples to 13.2.0 version

What's Changed

Full Changelog: 13.1.0...13.2.0

Contributors

dkamburov, kdinev, and 10 other contributors
Assets 2
Loading