Releases · IgniteUI/igniteui-angular-samples

27 Jun 13:05

16.0.0

2cea049

16.0.0 Latest

Latest

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]
})

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

28 Mar 11:44

zdrawku

15.1.0

859cb29

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

28 Nov 12:47

ChronosSF

15.0.0

9925e87

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

06 Oct 13:40

ChronosSF

14.2.0

ca3b103

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

Assets 2

14 Sep 08:46

zdrawku

14.1.0

3dac621

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

14 Jun 13:08

ChronosSF

14.0.0

77b50ae

14.0.0

Upgrade Ignite UI for Angular samples to 14.0.0 version

What's Changed

feat(ng14): migrating the project by @kdinev in #3021
Update live editing version by @dobromirts in #3023
chore: update to igniteui-angular@14.0.0-rc.0 by @Lipata in #3024
fix(stepper): change referenced forms type by @ddaribo in #3025
updating dockmanager to v1.8.0 by @ChronosSF in #3027
feat(*): updating igniteui-angular to 14.0.0 by @kdinev in #3029
Merging vNext into master by @kdinev in #3032
adding popperjs to deps for prod build - master by @ChronosSF in #3034

Full Changelog: 13.2.0...14.0.0

Contributors

kdinev, ChronosSF, and 3 other contributors

Assets 2

26 May 07:36

zdrawku

13.2.0

6c9dd41

13.2.0

Upgrade Ignite UI for Angular samples to 13.2.0 version

What's Changed

fix(tree-filter): add live editing config by @igdmdimitrov in #2962
fix(navbar): add button module to imports by @igdmdimitrov in #2960
fix(navbar): add button module to imports - master by @igdmdimitrov in #2964
fix(tree-filter): add live editing config - master by @igdmdimitrov in #2963
fix(): update live editing and fix sample configs by @dobromirts in #2968
fix(): simple combo configs by @dobromirts in #2970
fix(): update live editing and fix sample configs - master by @dobromirts in #2969
samples(dm): update dock manager to 1.7.0 by @DiyanDimitrov in #2973
samples(dm): update dock manager to 1.7.0 by @DiyanDimitrov in #2974
chore(*): Update to 13.1.5 by @dkamburov in #2976
chore(*): update igniteui-angular to 13.1.3 by @dkamburov in #2966
Add scrollbar theme in data analysis samples by @dobromirts in #2980
Add scrollbar theme in data analysis samples by @dobromirts in #2981
Fix issues with custom group by sample by @MayaKirova in #2977
Add delete row functionality for grid-batch-editing-sample by @RivaIvanova in #2983
Increase sample height for hgrid keyboard nav. by @skrustev in #2986
Updates hierarchical grid config to include reference to models by @3phase in #2972
Updates hierarchical grid config to include reference to models by @3phase in #2975
fix(grid): cond row selection fix for deselect all by @kdinev in #2903
chore(*): Fix horizontal sample orientation. by @MayaKirova in #2987
Show snackbar in selection samples by @RivaIvanova in #2993
Update to latest 13.2.0-beta.0 by @katherinedragieva in #3002
Add sorting options in grid/tree grid samples by @katherinedragieva in #2992
feat(slider): updating samples by @kdinev in #2995
feat(grid): adding switch to toggle multi-column header export by @kdinev in #2997
Add improvements in grid/tree grid sorting samples by @katherinedragieva in #3009
chore(*): updating igniteui-angular to 13.2.0-rc.0 by @kdinev in #3011
feat(expansion-panel): remove sample expansion panel paddings by @didimmova in #3010
Update README.md with status badges by @kdinev in #3008
Set null height for row islands so that they have consistent size in … by @MayaKirova in #2982
Update to 13.2.0 by @zdrawku in #3018
Merging vNext into master for 13.2.0 by @kdinev in #3012