Ignite UI for Angular Change Log
All notable changes for each version of this project will be documented in this file.
19.2.0
General
IgxCarousel
- Removed deprecated property
keyboardSupport
.
IgxSlide
- Deprecation -
tabIndex
has been deprecated and will be removed in a future version.
IgxGrid
, IgxHierarchicalGrid
, IgxTreeGrid
- A column's
minWidth
and maxWidth
constrain the user-specified width
so that it cannot go outside their bounds.
- In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true).
- In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns.
- The
pagingMode
property can now be set as simple strings 'local'
and 'remote'
and does not require importing the GridPagingMode
enum.
IgxHierarchicalGrid
- Introduced a new advanced filtering capability that enables top-level records to be dynamically refined based on the attributes or data of their associated child records.
- Added a new
schema
input property that can be used to pass collection of EntityType
objects. This property is required for remote data scenarios.
IgxQueryBuilderComponent
, IgxAdvancedFilteringDialogComponent
- Added support for entities with hierarchical structure.
EntityType
- A new optional property called
childEntities
has been introduced that can be used to create nested entities.
19.1.1
New Features
- IgxListItem
- Added a new
selected
input property, making it easier to indicate when a list item is selected by applying styling responsible for that state.
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 a new design that comes with an updated appearance and new functionality
IgxQueryBuilderComponent
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.
Themes
Deprecation The utility mixins light-theme
, dark-theme
, bootstrap-light-theme
, bootstrap-dark-theme
, fluent-light-theme
, fluent-dark-theme
, indigo-light-theme
, and indigo-dark-theme
have been deprecated and will be removed in version 20 of Ignite UI for Angular. Switch to the more generic theme
mixin instead.
Example:
$my-light-palette: palette(
$primary: navy,
$secondary: rebeccapurple,
$surface: white,
);
@include light-theme(
$palette: $my-light-palette
);
@include theme(
$palette: $my-light-palette,
$schema: $light-material-schema,
);
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:
background: hsl(var(--ig-primary-600));
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:
$my-palette: palette($primary: #09f, ...);
--ig-primary-500: #09f;
This change adds to our continuous effort to make theming configurable in CSS as much as it is in Sass.
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
18.1.0
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
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.
- 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.
17.2.0
New Features
IgxAvatar
- Removed deprecated property
roundShape
; Deprecated color
and bgColor
properties.
IgxButton
- Removed deprecated properties
color
and background
;
IgxCalendar
- Completely revamped calendar themes.
- New years view.
- Updated months view.
- Updated keyboard navigation and accessibility.
- Added selection preview in range selection mode.
- Added the ability to change the orientation of the calendar when multiple day views are present.
- Replaced the
vertical
property with orientation
that can be set to either horizontal
(default) or vertical
.
- Standalone views support full-blown keyboard navigation, accessibility improvements and the ability to change pages automatically on keyboard navigation.
- Standalone views now emit
pageChanged
event whenever the active view page changes.
IgxCard
- Removed deprecated properties
type
and reverse
;
IgxDialog
- Removed
leftButtonColor
, leftButtonBackgroundColor
rightButtonColor
, and rightButtonBackgroundColor
properties.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Enhanced the advanced filtering to emit the
filtering
event when filters are applied.
General
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- The
contextMenu
event now fires when the end-user clicks to the right of the right-most cell in the grid in case the grid's columns don't span its full width. For this reason the event argument of the event is now of type IGridContextMenuEventArgs
which contains the row object as well as the cell one. The latter will be null
if the event didn't originate from a cell. This is not a breaking change as the new type extends the old.
IgxSimpleCombo
- Behavioral Change The
selectionChanging
event will now trigger when typing the first character in the input if there is a previously selected value in the IgxSimpleCombo
.
- Behavioral Change Updated behavior to maintain the entered text in the input field upon pressing Enter while the combo input is focused, ensuring uninterrupted focus for continuous filtering. Additionally, the dropdown menu now remains open to display filtered results.
17.1.0
New Features
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Added a new output -
rowClick
that fires when the user clicks on a row element of the grid, including group rows
IgxTree
- Added new property
toggleNodeOnClick
that determines whether clicking over a node will change its expanded state or not. Set to false
by default.
IgxPivotGrid
IPivotDimension
interface now exposes a property called displayName
similar to the one in the IPivotValue
interface. This property is optional and will be displayed inside the chips for rows and columns in the IgxPivotGrid
. If the displayName
property is not set, memberName
will be used as a fallback.
IgxHierarchicalGrid
, IgxGridToolbar
- New directive -
igxIconButton
directive that provides a way to use an icon as a fully functional button has been added. The new igxIconButton
comes in three types - flat, outlined and contained (default). All igxButton
's with type icon
will be automatically migrated to the new igxIconButton
's with ng update
.
IgxButton
- Behavioral Change
buttonSelected
event is now emitted not only when a button gets selected, but also when it gets deselected. However, the event is no longer being emitted on initialization. If this event was used in a scenario where it is assumed that the button gets selected, it's a good idea the logic to be branched now based on eventArgs.selected
condition.
IgxRowIsland
- Added
toolbarTemplate
and paginatorTemplate
inputs for defining IgxGridToolbar
and IgxPaginator
templates.
General
igxButton
:
- Breaking Change The
raised
type of the igxButton
directive has been renamed to contained
. Automatic migrations are available and will be applied on ng update
.
- The
igxButtonColor
and igxButtonBackground
input properties have been deprecated and will be removed in a future version.
IgxForOf
- Unified logic for vertical and horizontal virtualization such as - caching, updating, max browser size exceeding.
- Added new method -
addScroll
that can shift the scroll thumb by the specified amount in pixels (negative number to scroll to previous, positive to scroll next). Similar to addScrollTop
but works for both vertical and horizontal virtualization.
IgxTextHighlightDirective
is now correctly tree-shaken out of the bundle when not used.
- Breaking Change A new
IgxTextHighlightService
is now exposed and methods setActiveHighlight
and clearActiveHighlight
have been moved to it.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Tree-shaking of the grids has been improved:
- The
igx-paginator
, igx-grid-toolbar
and igx-action-strip
components should now correctly tree-shake when not used in a grid.
- Breaking Changes
rowAdd
and rowDelete
events now emit event argument of type IRowDataCancelableEventArgs
instead of IGridEditEventArgs
. The two interfaces are still compatible, however redundant for these events properties cellID
, newValue
, oldValue
, isAddRow
are deprecated in IRowDataCancelableEventArgs
and will be removed in a future version. Switching to the correct new interfaces should reveal any deprecated use that can be safely removed.
- Deprecations
rowID
property has been deprecated in the following interfaces: IGridEditDoneEventArgs
, IPathSegment
, IRowToggleEventArgs
, IPinRowEventArgs
, IgxAddRowParent
and will be removed in a future version. Use rowKey
instead.
primaryKey
property has been deprecated in the following interfaces: IRowDataEventArgs
, IGridEditDoneEventArgs
. Use rowKey
instead.
data
property has been deprecated in the following interfaces: IRowDataEventArgs
. Use rowData
instead.
- HammerJS is now an optional dependency, which means apps no longer need to install and include it for related components to work. Touch-specific handling on some components is still dependent on HammerJS setup, but will be disabled without. The setup is now also an option when adding Ignite UI for Angular to existing projects via the
ng add
command.
17.0.0
General
IgxCard
- Breaking Change The
type
attribute has been deprecated and will be removed in a future version. The default view of the card component is now outlined
. Users can switch to elevated
view by adding the newly created elevated
property to a card.
standalone components
support is now official
- added
IGX_RADIO_GROUP_DIRECTIVES
for IgxRadioGroupDirective
and IgxRadioComponent
animations
are now imported from igniteui-angular/animations
/@infragistics/igniteui-angular/animations
- Tree-shaking of the product has been improved
igniteui-angular-i18n
is now tree-shakeable
igniteui-angular/animations
is now tree-shakeable
igniteui-angular
components have improved tree-shaking
- Breaking Change
getCurrentResourceStrings
has been removed. Use the specific component string imports instead.
- E.g. EN strings come from
igniteui-angular
: import { GridResourceStringsEN } from 'igniteui-angular';
- E.g. DE or other language strings come from
igniteui-angular-i18n
: import { GridResourceStringsDE } from 'igniteui-angular-i18n';
- DisplayDensity token and inputs are deprecated in favor of
--ig-size
theming
- We're working on reducing the library size
IgxRadioComponent
size has been reduced in half
IgxSwitchComponent
size has been reduced in half
IgxRadioComponent
- Breaking Change
IChangeRadioEventArgs
is now IChangeCheckboxEventArgs
. ng update
to 17.0.0
will automatically migrate this for you.
- Breaking Change
RadioLabelPosition
is now LabelPosition
. ng update
to 17.0.0
will automatically migrate this for you.
IgxSwitchComponent
- Breaking Change
IChangeSwitchEventArgs
is now IChangeCheckboxEventArgs
. ng update
to 17.0.0
will automatically migrate this for you.
- Breaking Change
SwitchLabelPosition
is now LabelPosition
. ng update
to 17.0.0
will automatically migrate this for you.
IgxCombo
- Breaking Change
IComboSelectionChangingEventArgs
properties newSelection
and oldSelection
have been renamed to newValue
and oldValue
respectively to better reflect their function. Just like Combo's value
, those will emit either the specified property values or full data items depending on whether valueKey
is set or not. Automatic migrations are available and will be applied on ng update
.
IComboSelectionChangingEventArgs
exposes two new properties newSelection
and oldSelection
in place of the old ones that are no longer affected by valueKey
and consistently emit items from Combo's data
.
Note: In remote data scenarios with valueKey
set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the valueKey
property.
- Breaking Change -
IComboSelectionChangingEventArgs
properties added
and removed
now always contain data items, regardless of valueKey
being set. This aligns them with the updated newSelection
and oldSelection
properties, including the same limitation for remote data as described above.
IgxSimpleCombo
- Breaking Change -
ISimpleComboSelectionChangingEventArgs
properties newSelection
and oldSelection
have been renamed to newValue
and oldValue
respectively to better reflect their function. Just like Combo's value
, those will emit either the specified property value or full data item depending on whether valueKey
is set or not. Automatic migrations are available and will be applied on ng update
.
ISimpleComboSelectionChangingEventArgs
exposes two new properties newSelection
and oldSelection
in place of the old ones that are no longer affected by valueKey
and consistently emit items from Combo's data
.
Note: In remote data scenarios with valueKey
set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the valueKey
property.
- Breaking Change The
value
and selection
properties now correctly return a single value or data item instead of the same wrapped in array and undefined
instead of empty array, matching the values emitted from selection event and when working with formControlName
/ngModel
directives.
IgxCombo
,IgxSimpleCombo
- Breaking Change The
displayValue
property now returns the display text as expected (instead of display values in array).
16.1.5
General
IgxButtonGroup
:
- Reverted cancellable on
selected
and deselected
events (added in 15.1.24) as it was breaking firing order and related handling.16.1.4
New Features
Themes
:
Experimental - Added the ability to configure the base font-size used to calculate the rem values in all component themes. This allows for proper scaling of components when a different document font-size is used.
Code example:
@use 'igniteui-theming/sass/config' as * with (
$base-font-size: 10px // <-- 10px == 1rem
);
@use 'igniteui-angular/src/lib/core/styles/themes' as *;
html {
font-size: var(--ig-base-font-size);
}
@include core();
@include typography();
@include theme();
16.1.0
New Features
IgxSelect
:
The select component now has the ability to handle igxPrefix
and igxSuffix
directives inside igx-select-item
.
<igx-select-item>
<igx-icon igxPrefix>alarm</igx-icon>
Select item text content
<igx-icon igxSuffix>alarm</igx-icon>
</igx-select-item>
IgxBadge
:
- Material icons extended along with any other custom icon set can now be used inside the badge component.
Code example:
import { IgxBadgeComponent, IgxIconService } from 'igniteui-angular';
import { heartMonitor } from '@igniteui/material-icons-extended';
export class BadgeSampleComponent implements OnInit {
constructor (protected _iconService: IgxIconService) {}
public ngOnInit() {
this._iconService.addSvgIconFromText(heartMonitor.name, heartMonitor.value, 'imx-icons');
}
}
<igx-badge icon="heart-monitor" iconSet="imx-icons"></igx-badge>
IgxCombo
:
- Exposed
comboIgnoreDiacriticsFilter
filter function which normalizes diacritics to their base representation.
When the combo components are configured with it, filtering for "resume" will match both "resume" and "résumé".
IgxCombo
, IgxSimpleCombo
- Added new property
displayValue
that returns array of display keys.
IgxButtonGroup
:
- Added
owner
to the IButtonGroupEventArgs
to identify the emitting button group instance.
- Breaking Change Added the
selectionMode
property that sets the selection mode of the buttons in the IgxButtonGroup
. Selection modes are single
, singleRequired
and multi
as default is single
.
- Breaking Change Deprecated the
multiSelection
property and all references have been migrated to selectionMode="multi"
.
Themes
:
- Include a standalone theme for the
igxLabel
directive to allow usage with components outside the Input Group.
Changing the size of Ignite UI components can now be done via a new custom CSS property - --ig-size
. The DisplayDensityToken
injection token and consequently, the displayDensity
inputs for all components will be deprecated in the next major version and it is recommended that they no longer be used for sizing components.
Code example:
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact } }],
<igx-grid [displayDensity]="'compact'">...</igx-grid>
igx-grid {
--ig-size: var(--ig-size-small);
}
General
IgxStepper
:
- Breaking Change The
IgxStepSubTitleDirective
has been renamed to IgxStepSubtitleDirective
. Automatic migrations are available and will be applied on ng update
.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- The
draggable
attribute is no longer required to be set on interactable elements, if a column header is templated and the Column Moving is enabled in order for handlers for any event to be triggered. Now draggable='false'
can be used as an addition if the user shouldn't be able to drag a column by that element, but even if omitted click
events for example will trigger now.
- Behavioral Change When there are already grouped columns, the group drop area now shows after dragging of a column starts and not when only click actions are performed.
IgxCombo
, IgxSimpleCombo
:
- Breaking Change The
selection
property returns an array of the selected items even when a value key is provided and the value
property returns an array of value keys instead of display keys. Automatic migrations are available and will be applied on ng update
.
- Improved tree-shaking support for the
@igniteui/material-icons-extended
package.
- Improved tree-shaking support for the
igniteui-angular-i18n
package.
- Improved tree-shaking support for all grids.
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:
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
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
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:
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.
IgxForOf
- Add support for
as
syntax in template to get bound data
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.
IgxCard
- Buttons and icons slotted in the
igx-card-actions
can now be explicitly arranged to the start/end of the layout. To position components on either side users can take advantage of the newly added directives: igxStart
- aligns items to the start and igxEnd
- aligns items on the end of the card actions area.
The reverse
property has been deprecated and will be removed in a future version.
Code example:
<igx-card>
<igx-card-header>
<h3>Title</h3>
</igx-card-header>
<igx-card-content>
Card Content
</igx-card-content>
<igx-card-actions>
<igx-icon igxStart>drag_indicator</igx-icon>
<button igxButton="icon" igxStart>
<igx-icon>favorite</igx-icon>
</button>
<button igxButton igxEnd>Button</button>
</igx-card-actions>
</igx-card>
IgxButtonGroup
:
- The
selected
and deselected
events are now cancellable.
General
IgxPivotGrid
- The
IgxPivotDateDimension
properties inBaseDimension
and inOption
have been deprecated and renamed to baseDimension
and options
respectively.
IgxGrid
- Breaking Change The
onGroupingDone
output has been renamed to groupingDone
to not violate the no on-prefixed outputs convention. Automatic migrations are available and will be applied on ng update
.
- Column formatters are now applied to values shown group rows when using the default template. For custom formatters, the formatter function is called with the data from the first row in the group.
DisplayDensity
- Breaking Change The
onDensityChanged
output has been renamed to densityChanged
to not violate the no on-prefixed outputs convention. All components exposing this event are affected. Automatic migrations are available and will be applied on ng update
.
IgxGrid
, IgxTreeGrid
, 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
- Added the capability to escape mask pattern literals.
- 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.
- 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
.
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
.
IgxSimpleCombo
- The
IgxSimpleCombo
will not open its drop-down on clear.
15.0.1
IgxGrid
- Added new auto-sizing API
recalculateAutoSizes
that recalculates widths of columns that have size set to auto
. Can be used in scenarios where you want to auto-size the columns again post initialization.
- Clicking with the Left Mouse key while holding
Ctrl
on selected cell will deselect the cell.
igxPivotGrid
- Adding
aggregatorName
for pivot value configuration as an alternative to setting aggregator
function. If both are set aggregatorName
takes precedent. If none are set an error is thrown.
IgxSimpleCombo
- Behavioral Change
- When the user clicks on the combo's input, the dropdown opens up.
- Keyboard navigation
ArrowUp
- when the combo is opened ArrowUp
will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise ArrowUp
will move to the previous list item.
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)
A new groupRecord
parameter has been exposed in operate
method, that is an IGroupByRecord
object describing the grouped row in case grouping is applied.
excelStyleHeaderIconTemplate
- Gets/Sets the 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 hiddenColumnsCount
would be displayed.
- Behavioral Change - The Grid Paginator component is no longer hidden when there's no data and/or all columns are hidden.
IgxExcelExporterService
- Added support for exporting grid summaries.
- 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
.
IgxFilterOptions
- Added support for multiple keys.
Theme Changes
Breaking Changes - The palette
function no longer provides info
, success
, warn
and error
colors. Therefore you have to pass custom values for them if you need to use these colors. You can also use the values for info
, success
, warn
and error
colors from our predefined color palettes.
Code example:
$primary-color: #2a38b7;
$secondary-color: #f96a88;
$surface-color: #e1ebe4;
$error-color: color($light-fluent-palette, 'error');
$warn-color: color($light-fluent-palette, 'warn');
$info-color: color($light-fluent-palette, 'info');
$success-color: color($light-fluent-palette, 'success');
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color,
$surface: $surface-color,
$error: $error-color,
$warn: $warn-color,
$info: $info-color,
$success: $success-color
);
14.2.0
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.
14.1.0
New Features
- 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
.
General
- Breaking Changes -
filterable
property of IgxComboComponent
is now deprecated and will be removed in future version. Use filteringOptions.filterable
instead.
Theme Changes
- Breaking Changes -
$disable-shadow
property of IgxTabsComponent
theme has been removed.
14.0.0
- Added additional theme properties for the
IgxCalendar
so that it's easier to style the :hover
and :focus
states inside the selected date or range of dates.
IgxDatePicker
and IgxDateRangePicker
now expose a weekStart
input property like the IgxCalendar
IgxCombo
and IgxSimpleComboComponent
- The combobox
role
, aria-haspopup
, aria-expanded
, aria-controls
and aria-labelledby
attributes have been moved from combo wrapper to the combo input. Additionally the IgxSimpleComboComponent
input is marked with aria-readonly="false"
and aria-autocomplete="list"
attributes. The aria-labelled
attribute is applied to the combo dropdown as well and can be set by the ariaLabelledBy
property, the combo label or placeholder. The serach input within the combo dropdown is now marked as role="searchbox"
, aria-label="search"
and aria-autocomplete="list"
. The dropdown item container has aria-activedescendant
attribute to identify the currently active element of the item list. The IgxCombo
container is also marked as aria-multiselectable="true"
. The dropdown header items role has been changed to group
.
IgxDropDown
- The
label
attribute has been changed to aria-labelledby
and can be set by a latterly added input property labelledBy
.
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.
General
- Updating dependency to Angular 14
Migrations
- Migrations now support Yarn berry (version 2+)
IgxGridEditingActions
- Added new inputs to show/hide the edit and delete buttons -
editRow
, deleteRow
.
IgxTabs
- Behavioral Change - Both scroll buttons are displayed when the tabs are not fully visible. When there is no tabs to be scrolled in one of the directions the corresponding scroll button is disabled.
Locale settings
IgxDatePicker
and IgxDateRangePicker
now expose a weekStart
input property like the IgxCalendar
IColumnPipeArgs
interface now expose a weekStart
property to control the first week of day in calendar used in the grid for editing and filtering
locale
property of IgxCalendar
, IgxDatePicker
, IgxDateRangePicker
and IgxGrid
will now default to globall Angular application locale, if not set.
weekStart
property of IgxCalendar
, IgxDatePicker
, IgxDateRangePicker
and IgxGrid
will default to the default first day for the current component locale
, if not set.
13.2.0
General
IgxPivotGrid
Breaking Change - Changing the IPivotValue
's formatter
and styles
functions optional parameters, example:
formatter?: (value: any, rowData?: IPivotGridRecord, columnData?: IPivotGridColumn) => any;
First optional parameter rowData
is now of type IPivotGridRecord
and contains more contextual information on the dimension and aggregation values. Previously it contained just the aggregation data object. Old usage can be updated as follows, from:
formatter: (value: any, rowData: any) => rowData['someField'];
to:
formatter: (value: any, rowData: IPivotGridRecord) => rowData.aggregationValues.get('someField');
Also an additional optional columnData
parameter can be added, which contains information on the column dimensions.
IgxExpansionPanel
- Changed the expansion panel layout, adding padding to the header and content elements.
New palette
A new fluent light and dark palettes that use the default fluent colors - $light-fluent-palette
and $dark-fluent-palette
.
New Features
New Features
Added new CSS property --igx-icon-size
to allow changing the icon when its original size is modified by other components.
.igx-button {
--igx-icon-size: 10px;
}
Added IgxPivotGrid
component(Preview)
The igxPivotGrid is a data presentation control for displaying data in a pivot table. It enables users to perform complex analysis on the supplied data. Main purpose is to transform and display a flat array of data into a complex grouped structure with aggregated values based on the main 3 dimensions: rows, columns and values, which the user may specify depending on his/her business needs. The whole pivot grid configuration is set through IPivotConfiguration
interface.
<igx-pivot-grid [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
</igx-pivot-grid>
For more information, check out the README, specification and official documentation.
IgxTreeGrid
- Added support for tree filter items in the Excel Style filtering UI. Use the
TreeGridFilteringStrategy
constructor to specify which columns should display tree filter items.
igxTooltipTarget
directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the igxTooltip
directive. This is achieved via the newly introduced tooltip
string input.
<button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">
info
</button>
IgxTabs
have full right-to-left (RTL) support.
IgxExcelExporterService
- Added support for exporting the grids' headers by default when the data is empty. This behavior can be controlled by the
alwaysExportHeaders
option of the IgxExcelExporterOptions object.
Theming
- Added
--igx-radius-factor
property to allow for easier update of all components' roundness. Its value can be any decimal fraction between 0 and 1. By default the value is set to 1.
- Added
--igx-elevation-factor
property to allow for easier update of all components' shadows at runtime.
General
13.0.5
New Features
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Added
dataCloneStrategy
input, which allows users provide their own implementation of how data objects are cloned when row and/or batch editing is enabled. The custom strategy should implement the IDataCloneStrategy
interface.
13.0.1
New Features
13.0.0
New Features
Added IgxStepper
component
- Highly customizable component that visualizes content as a process and shows its progress by dividing the content into chronological
igx-steps
.
- Exposed API to control features like step validation, styling, orientation, and easy-to-use keyboard navigation.
Code example below:
<igx-stepper>
<igx-step *ngFor="let step of stepsData" >
...
</igx-step>
</igx-stepper>
For more information, check out the README, specification and official documentation.
Added IgxFocusTrap
directive, which traps the Tab key focus within an element.
<div #wrapper [igxFocusTrap]="true" tabindex="0">
<input type="text" placeholder="Enter Username" name="uname">
<input type="password" placeholder="Enter Password" name="psw">
<button>SIGN IN</button>
</div>
Added IgxSimpleComboComponent
IgxCsvExporterService
, IgxExcelExporterService
- Exporter services are no longer required to be provided in the application since they are now injected on a root level.
IgxGridToolbarPinningComponent
, IgxGridToolbarHidingComponent
- Exposed new input
buttonText
which sets the text that is displayed inside the dropdown button in the toolbar.
IgxCombo
- Added
groupSortingDirection
input, which allows you to set groups sorting order.
igxChip
- Exposed drop directive related events for the chip when it's used as a drop target:
dragLeave
dragDrop
dragOver
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Added new directives for re-templating header sorting indicators -
IgxSortHeaderIconDirective
, IgxSortAscendingHeaderIconDirective
and IgxSortDescendingHeaderIconDirective
.
IgxGrid
- Exposed a
groupStrategy
input that functions similarly to sortStrategy
, allowing customization of the grouping behavior of the grid. Please, refer to the Group By topic for more information.
IgxDialog
- Added
focusTrap
input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to true
.
IgxProgressBar
- Exposed new animationDuration input - sets the duration of the progress animation.
General
IE discontinued support
Breaking Change details
web-animations-js
is removed as Peer Dependency.
- Removed IE from
.browserslistrc
- Removed IE related
polyfills
, like Importing ES7 polyfill for Object ('core-js/es7/object'
) for IE is no longer used.
IgxDialog
Breaking Change - The default positionSettings open/close animation has been changed to fadeIn
/fadeOut
. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation:
import { slideInBottom, slideOutTop } from 'igniteui-angular';
@ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
public newPositionSettings: PositionSettings = {
openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} })
};
this.alert.positionSettings = this.newPositionSettings;
igxGrid
, igxHierarchicalGrid
, igxTreeGrid
IgxCarousel
- Breaking Changes - The carousel animation type
CarouselAnimationType
is renamed to HorizontalAnimationType
.
Theming
12.2.3
General
- Breaking Change -
IgxPercentSummaryOperand
and IgxCurrencySummaryOperand
have been removed and IgxNumberSummaryOperand
should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
IgxToastComponent
- Deprecated - The
position
input property has been deprecated. Use positionSettings
input instead.12.2.1
New Features
igxGrid
, igxHierarchicalGrid
, igxTreeGrid
- new
rowPinned
event is emitted after a row is pinned/unpinned and grid has already refreshed its state to represent the pinned/unpinned rows in the DOM.
12.2.0
New Features
General
igxGrid
, igxHierarchicalGrid
, igxTreeGrid
IgxForOf
- now takes margins into account when calculating the space that each element takes.
Note: If your virtualized items contain margins, please calculate them into the itemSize
value for the best possible initial virtualized state.
IgxExcelExporterService
- Added support for freezing column headers in Excel. By default, the column headers would not be frozen but this behavior can be controlled by the
freezeHeaders
option of the IgxExcelExporterOptions object.
12.1.0
New Features
Added IgxAccordion
component
- A collection of vertically collapsible igx-expansion-panels that provide users with data and the ability to navigate through it in a compact manner. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered.
- Exposed API to control the expansion state, easy-to-use keyboard navigation, option for nested accordions.
Code example below:
<igx-accordion>
<igx-expansion-panel *ngFor="let panel of panels">
...
</igx-expansion-panel>
</igx-accordion>
For more information, check out the README, specification and official documentation
igxGrid
New additionalTemplateContext
column input:
<igx-column [additionalTemplateContext]="contextObject">
<ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
{{ props }}
</ng-template>
</igx-column>
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Added
batchEditing
- an Input
property for controlling what type of transaction service is provided for the grid.
Setting <igx-grid [batchEditing]="true">
is the same as providing [{ provide: IgxGridTransaction, useClass: IgxTransactionService }]
.
Deprecation - Providing a transaction service for the grid via providers: [IgxTransactionService]
is now deprecated and will be removed in a future patch.
Instead, use the new batchEditing
property to control the grid's Transactions.
<igx-grid #grid [data]="data" [batchEditing]="true">
...
</igx-grid>
<button igxButton (click)="grid.transactions.undo">Undo</button>
- Breaking changes
IgxGridCellComponent
, IgxTreeGridCellComponent
, IgxHierarchicalGridCellComponent
are no longer exposed in the public API. Instead, a new class IgxGridCell
replaces all of these. It is a facade class which exposes only the public API of the above mentioned. Automatic migration will change these imports with CellType
, which is the interface implemented by IgxGridCell
- Behavioral changes
getCellByKey
, getCellByColumn
, getCellByColumnVisibleIndex
, row.cells
, column.cells
, grid.selectedCells
now return an IgxGridCell
the CellType
interface.
cell
in IGridCellEventArgs
is now CellType
. IGridCellEventArgs
are emitted in cellClick
, selected
, contextMenu
and doubleClick
events.
let-cell
property in cell template is now CellType
.
getCellByColumnVisibleIndex
is now deprecated and will be removed in next major version. Use getCellByKey
, getCellByColumn
instead.
Transactions
- Added
IgxFlatTransactionFactory
- the singleton service instantiates a new TransactionService<Transaction, State>
given a transaction type
.
- Added
IgxHierarchicalTransactionFactory
- the singleton service instantiates a new HierarchicalTransactionService<HierarchicalTransaction, HierarchicalState>
given a transaction type
.
Toolbar Actions
Exposed a new input property overlaySettings
for all column actions (hiding
| pinning
| advanced filtering
| exporter
). Example below:
<igx-grid-toolbar-actions>
<igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsGlobal"></igx-grid-toolbar-pinning>
<igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
</igx-grid-toolbar-actions>
IgxPaginatorComponent
Exporters
's columnExporting
event now supports changing the index of the column in the exported file. this.excelExporterService.columnExporting.subscribe((col) => {
if (col.field === 'Index') {
col.columnIndex = 0;
}
});
IgxExcelExporterService
- Added support for exporting the grids' multi-column headers to Excel. By default, the multi-column headers would be exported but this behavior can be controlled by the
ignoreMultiColumnHeaders
option off the IgxExcelExporterOptions object.
IgxDateTimeEditor
, IgxMask
, IgxDatePicker
, IgxTimePicker
, IgxDateRangePicker
- Added IME input support. When typing in an Asian language input, the control will display input method compositions and candidate lists directly in the control’s editing area, and immediately re-flow surrounding text as the composition ends.
General
IgxGridComponent
- The following properties are deprecated:
paging
perPage
page
totalPages
isFirstPage
isLastPage
pageChange
perPageChange
pagingDone
- The following methods, also are deprecated:
nextPage()
previousPage()
- Breaking Change the following property has been removed
IgxPaginatorComponent
- Deprecated properties
selectLabel
and prepositionPage
are now removed;
- Breaking Change - the following properties are removed
pagerEnabled
pagerHidden
dropdownEnabled
dropdownHidden
IgxSnackbarComponent
- Deprecated property
message
is now removed;
- Breaking Change - the
snackbarAnimationStarted
and snackbarAnimationDone
methods are now removed. The animationStarted
and animationDone
events now provide reference to the ToggleViewEventArgs
interface as an argument and are emitted by the onOpened
and onClosed
events of the IgxToggleDirective
.
IgxToastComponent
- Deprecated property
message
is now removed;
- Breaking Change - The
isVisibleChange
event now provides reference to the ToggleViewEventArgs
interface as an argument.
Breaking Change - IgxOverlayService
events are renamed as follows:
onOpening
-> opening
onOpened
-> opened
onClosing
-> closing
onClosed
-> closed
onAppended
-> contentAppended
onAnimation
-> animationStarting
IgxMaskDirective
- Breaking Change - Deprecated property
placeholder
is now removed;
- Breaking Change -
IgxMaskDirective
events are renamed as follows:
onValueChange
-> valueChanged
Breaking Change - IgxBannerComponent
events are renamed as follows:
onOpening
-> opening
onOpened
-> opened
onClosing
-> closing
onClosed
-> closed
IgxExpansionPanelComponent
- Breaking Change -
IExpansionPanelEventArgs.panel
- Deprecated event property panel
is removed. Usе owner
property to get a reference to the panel.
Breaking Change - IgxExpansionPanelComponent
events are renamed as follows:
onCollapsed
-> contentCollapsed
onExpanded
-> contentExpanded
Breaking Change - IgxExpansionPanelHeaderComponent
events are renamed as follows:
onInteraction
-> interaction
Behavioral Change - Settings disabled
property of IgxExpansionPanelHeaderComponent
now makes the underlying header element not accessible via Tab
navigation (via tabindex="-1"
)
Feature - Added contentExpanding
and contentCollapsing
events, fired when the panel's content starts expanding or collapsing, resp.
Both events can be canceled, preventing the toggle animation from firing and the collapsed
property from changing:
<igx-expansion-panel (contentExpanding)="handleExpandStart($event)" (contentCollapsing)="handleCollapseStart($event)">
...
</igx-expansion-panel>
IgxBanner
BannerEventArgs.banner
- Deprecated. Usе owner
property to get a reference to the banner.
IgxDropDown
- Breaking Change - The dropdown items no longer takes focus unless
allowItemsFocus
is set to true
.
- Breaking Change - The following events have been renamed as follows:
onOpening
-> opening
onOpened
-> opened
onClosing
-> closing
onClosed
-> closed
onSelection
-> selectionChanging
IgxToggleDirective
- Breaking Change - The following events have been renamed as follows:
onOpened
-> opened
onOpening
-> opening
onClosed
-> closed
onClosing
-> closing
onAppended
-> appended
IgxCombo
- Breaking Change - The following events have been renamed as follows:
onSelectionChange
-> selectionChanging
onSearchInput
-> searchInputUpdate
onAddition
-> addition
onDataPreLoad
-> dataPreLoad
onOpening
-> opening
onOpened
-> opened
onClosing
-> closing
onClosed
-> closed
opened
and closed
event will emit with IBaseEventArgs
. opening
event will emit with CancelableBrowserEventArgs
.
- Breaking Change -
IComboSelectionChangeEventArgs
is renamed to IComboSelectionChangingEventArgs
IgxSelect
opened
and closed
event will emit with IBaseEventArgs
. opening
event will emit with CancelableBrowserEventArgs
.
- Breaking Change - The following events have been renamed as follows:
onOpening
-> opening
onOpened
-> opened
onClosing
-> closing
onClosed
-> closed
onSelection
-> selectionChanging
IgxAutocomplete
- Breaking Change - The following events have been renamed as follows:
onItemSelected
-> selectionChanging
- Breaking Change -
AutocompleteItemSelectionEventArgs
is renamed to AutocompleteSelectionChangingEventArgs
IgxDialog
- Breaking Change - The following events have been renamed as follows:
onOpen
-> opening
onOpened
-> opened
onClose
-> closing
onClosed
-> closed
onLeftButtonSelect
-> leftButtonSelect
onRightButtonSelect
-> rightButtonSelect
IgxDropDown
opened
and closed
event will emit with IBaseEventArgs
.
Themes
- Breaking Change - The
$color
property of the igx-action-strip-theme
has been renamed as follows:
12.0.3
General
IgxExpansionPanelHeaderComponent
- Behavioral Change - Settings
disabled
property of IgxExpansionPanelHeaderComponent
now makes the underlying header element not accessible via Tab
navigation (via tabindex="-1"
)
12.0.0
General
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Breaking Change - The
locale
and pipeArgs
parameters are removed from the operate
method exposed by the IgxNumberSummaryOperand
, IgxDateSummaryOperand
, IgxCurrencySummaryOperand
and IgxPercentSummaryOperand
. They are now set in the igx-grid-summary-cell
template. To change the locale and format setting of the igx-grid-summary-cell
the user can use the new summaryFormatter
property of the IgxColumnComponent
.
- Breaking Change -
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
events are renamed as follows:
onCellClick
-> cellClick
onScroll
-> gridScroll
onSelection
-> selected
onRowSelectionChange
-> rowSelected
onColumnSelectionChange
-> columnSelected
onColumnPinning
-> columnPin
onColumnInit
-> columnInit
onSortingDone
-> sortingDone
onFilteringDone
-> filteringDone
onPagingDone
-> pagingDone
onRowAdded
-> rowAdded
onRowDeleted
-> rowDeleted
onColumnResized
-> columnResized
onContextMenu
-> contextMenu
onDoubleClick
-> doubleClick
onColumnVisibilityChanged
-> columnVisibilityChanged
onColumnMovingStart
-> columnMovingStart
onColumnMoving
-> columnMoving
onColumnMovingEnd
-> columnMovingEnd
onGridKeydown
-> gridKeydown
onRowDragStart
-> rowDragStart
onRowDragEnd
-> rowDragEnd
onGridCopy
-> gridCopy
onRowToggle
-> rowToggle
onRowPinning
-> rowPinning
onToolbarExporting
-> toolbarExporting
onRangeSelection
-> rangeSelected
IgxGridRowComponent
, IgxGridGroupByRowComponent
, IgxTreeGridRowComponent
, IgxHierarchicalRowComponent
are no longer exposed in the public API. Automatic migration will change these imports with RowType
.
- The IgxColumn data type
DataType
is renamed to GridColumnDataType
.
- Behavioral changes
getRowByIndex
, getRowByKey
, cell.row
now return an object implemening the RowType
interface.
dragData
emitted with IRowDragEndEventArgs
, IRowDragStartEventArgs
is now RowType
IRowDragEndEventArgs
, IRowDragStartEventArgs
now emit dragElement
, which holds the dragged row html element.
row
in IPinRowEventArgs
is now RowType
IgxTabs
, IgxBottomNav
- Breaking Change -
IgxTabs
and IgxBottomNav
components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via ng update
in order to migrate the existing igx-tabs
and igx-bottom-nav
definitions to the new ones.
IgxForOfDirective
- Breaking Change -
IgxForOfDirective
events are renamed as follows:
onChunkLoad
-> chunkLoad
onScrollbarVisibilityChanged
-> scrollbarVisibilityChanged
onContentSizeChange
-> contentSizeChange
onDataChanged
-> dataChanged
onBeforeViewDestroyed
-> beforeViewDestroyed
onChunkPreload
-> chunkPreload
onDataChanging
-> dataChanging
IgxColumnComponent
- Breaking Change - The
onColumnChange
output is renamed to columnChange
.
- Breaking Change -
IgxHierarchicalGrid
and igxRowIsland
events are renamed as follows:
onGridCreated
-> gridCreated
onGridInitialized
-> gridInitialized
onDataPreLoad
-> dataPreLoad
IgxInputGroupComponent
- Breaking Change -
disabled
property removed. Use the underlying IgxInputDirective.disabled
to control the disabled state of the input group. Please make sure to update via ng update
to migrate an usage of disabled
in your template files. Please make sure to check out the update guide.
IgxDateTimeEditor
- Breaking Change -
onValueChange
event is renamed to valueChange
.
- Breaking Change -
isSpinLoop
property is renamed to spinLoop
.
IgxDatePicker
IgxTimePicker
IgxDateRangePicker
- Breaking Change -
rangeSelected
event is renamed to valueChange
.
- Breaking Change -
onOpening
, onOpened
, onClosing
and onClosed
events are renamed respectively to opening
, opened
, closing
and closed
.
- Breaking Change -
monthsViewNumber
is renamed to displayMonthsCount
.
IgxSliderComponent
- Breaking Change - The following outputs are renamed:
onValueChange
to valueChange
onValueChanged
to dragFinished
IgxCircularProgressBarComponent
- Breaking Change - The following outputs are renamed:
onProgressChanged
to progressChanged
IgxLinearProgressBarComponent
- Breaking Change - The following outputs are renamed:
onProgressChanged
to progressChanged
IgxToast
- Breaking Change - The following deprecated methods and outputs have been removed
- Outputs
showing
, shown
, hiding
, hidden
. Use onOpening
, onOpened
, onClosing
, onClosed
instead.
- Methods
show
, hide
. Use open
, close
instead.
IgxSnackbar
- Breaking Change - The following deprecated methods have been removed
show
, hide
. Use open
, close
instead.
New Features
Themes:
Breaking Changes:
IgxButton
theme has been simplified. The number of theme params (igx-button-theme
) has been reduced significantly and no longer includes prefixed parameters (flat-*
, raised-*
, etc.). See the migration guide to update existing button themes. Updates performed with ng update
will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
The igx-typography
mixin is no longer implicitly included with igx-core
. To use our typography styles users have to include the mixin explicitly:
@include igx-core();
/// Example with Indigo Design theme:
@include igx-typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale);
11.1.13
General
IgxExpansionPanelHeaderComponent
- Behavioral Change - Settings
disabled
property of IgxExpansionPanelHeaderComponent
now makes the underlying header element not accessible via Tab
navigation (via tabindex="-1"
)
11.1.1
New Features
New Features
IgxDropDown
- The
igx-drop-down-item
now allows for igxPrefix
, igxSuffix
and igx-divider
directives to be passed as ng-content
and they will be renderer accordingly in the item's content.
IgxGrid
- Added support for exporting grouped data.
IgxTreeGrid
- Added
multipleCascade
row selection mode. In this mode, selecting a record results in the selection of all its children recursively. When only some children are selected, their parent's checkbox is in an indeterminate state.
```html
<igx-tree-grid [rowSelection]="'multipleCascade'">
</igx-tree-grid>
```
General
11.0.15
New Features
11.0.4
General
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- a new property
event
has been introduced to IGridEditEventArgs
and IGridEditDoneEventArgs
; the property represents the original DOM event that triggers any of Grid editing events like rowEditEnter
, cellEditEnter
, cellEdit
, cellEditDone
, cellEditExit
, rowEdit
, rowEditDone
, rowEditExit
- Behavioral Change -
When there isn't a previous active node and the user enters the grid using tab or shift + tab key:
the first fully visible element is activated: /no scroll bar positioning is reset/changed;
If there is a previous active node in the grid - the previously active node is reactivated without resetting the scroll positions;
If we follow the default tab navigation and we are currently on a data cell with / rowIndex: -1, columnIndex: 6/ for example
when we tab down to the root summaries the summary cell with visible column index 6 should be activated and scroll into the view;
The same applies if you shift+tab to the headers header cell with visible index 6 is activated and scrolled into the view;
If you have an active node and go to another tab and then return back the active node and the current scroll position should not be changed;
11.0.0
General
New Features
IgxCalendar
- Is now fully accessible to screen readers.
Improvements
IgxOverlay
- New functionality to automatically determine the correct animation that is needed when showing an overlay content. This is used with Auto Position strategy, where the
IgxOverlay
content is flipped, depending on the available space.
10.2.25
IgxExpansionPanelHeaderComponent
- Behavioral Change - Settings
disabled
property of IgxExpansionPanelHeaderComponent
now makes the underlying header element not accessible via Tab
navigation (via tabindex="-1"
)
10.2.15
New Features
10.2.0
General
IgxGridActions
- Added
asMenuItems
Input for grid actions - igx-grid-editing-actions
, igx-grid-pinning-actions
. When set to true will render the related action buttons as separate menu items with button and label.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Behavioral Change - The Excel Style Filtering has been reworked to provide filtering experience such as in Excel. This includes the following changes:
- You can close the Excel Style Filtering menu by pressing
Ctrl + Shift + L
.
- You can apply the filter by pressing
Enter
.
- When searching items in the Excel Style Filtering menu, only the rows that match your search term will be filtered in.
- By checking the
Add current selection to filter
option, the new search results will be added to the previously filtered items.
IgxInputGroup
- Breaking Change - Removed
fluent
, fluent_search
, bootstrap
, and indigo
as possible values for the type
input property.
- Behavioral Change - The styling of the input group is now dictated by the theme being used. The remaining
types
- line
, border
, and box
will only have effect on the styling when used with the material
theme. The search
type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Rename outputs
onRowEditEnter
to rowEditEnter
onCellEditEnter
to cellEditEnter
onCellEdit
to cellEdit
onRowEdit
to rowEdit
- Breaking Change - The
onCellEditCancel
event is replaced by the new cellEditExit
event that emits every time the editable cell exits edit mode.
- Breaking Change - The
onRowEditCancel
event is replaced by the new rowEditExit
event that emits every time the editable row exits edit mode.
IgxOverlay
- Breaking Change -
target
property in PositionSettings
has been deprecated. You can set the attaching target for the component to show in OverlaySettings
instead.
IgxToggleDirective
onAppended
, onOpened
and onClosed
events are emitting now arguments of ToggleViewEventArgs
type.
onOpening
and onClosing
events are emitting now arguments of ToggleViewCancelableEventArgs
type.
IgxSelect
- Added
aria-labelledby
property for the items list container(marked as role="listbox"
). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
IgxDatePicker
- Breaking Change - Deprecated the
label
property.
- Added
aria-labelledby
property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
igxNavigationDrawer
- Added
disableAnimation
property which enables/disables the animation, when toggling the drawer. Set to false
by default.
igxTabs
- Added
disableAnimation
property which enables/disables the transition animation of the tabs' content. Set to false
by default.
IgxExpansionPanel
IExpansionPanelEventArgs.panel
- Deprecated. Usе owner
property to get a reference to the panel.
IgxCalendarComponent
, IgxMonthsViewComponent
and IgxYearsViewComponent
tabIndex
property was removed in order to improve on page navigation and to be compliant with W3 accessability recommendations; Also the date grid in the calendar is now only one tab stop, the same approach is applied and in the IgxMonthsViewComponent
and IgxYearsViewComponent
;
New Features
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
cellEditExit
is a new event that fires when cell exits edit mode
rowEditExit
is a new event that fires when row exits edit mode
- Added getRowData(rowSelector) method that returns an object that represents the data that is contained in the specified row component.
- Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
beginAddRow
method which starts the adding row UI.
beginAddChild
method which starts the adding child UI.this.grid.beginAddRow(rowID);
- Added an input properties to
IgxGridEditingActions
component to show/hide add row and add child buttons which trigger the UI based on context expression.<igx-tree-grid [rowEditing]="true">
<igx-action-strip #actionStrip>
<igx-grid-editing-actions [addRow]="true" [addChild]="actionStrip.context.level < 3">
</igx-grid-editing-actions>
</igx-action-strip>
</igx-tree-grid>
- A new
locale
and pipeArgs
parameters are introduced in the operate
method exposed by the IgxNumberSummaryOperand
and IgxDateSummaryOperand
, which exposes the grid locale. Use the locale
parameter to get localized summary data (as per the grid locale. If not passed, locale
defaults to 'en-US'
). Use the pipeArgs
parameter only if you want to customize the format of the date and numeric values that will be returned.class MySummary extends IgxDateSummaryOperand {
operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
const pipeArgs: IColumnPipeArgs = {
format: 'longDate',
timezone: 'UTC',
digitsInfo: '1.1-2'
}
const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
return result;
}
}
- A new
pipeArgs
input property is exposed by the IgxColumnComponent
, which is used to pass arguments to the Angular DatePipe
and DecimalPipe
, to format the display for date and numeric columns.
`
typescript
IGX_INPUT_GROUP_TYPE
injection token
- Allows for setting an input group
type
on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a type
.
IgxExcelExporterService
- Added
worksheetName
property to the IgxExcelExporterOptions
, that allows setting the name of the worksheet.
IgxDatePicker
- The the
label
property have been deprecated and a custom label can also be set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
IgxTimePicker
- Added a custom label functionality.
IgxCalendar
and IgxDatePicker
- new showWeekNumbers
input, that allows showing of the week number at left side of content area.
IgxOverlay
- The
PositionSettings
target
property has been deprecated and moved to OverlaySettings
.
- An optional Point/HTML Element parameter
target
has been added to the position()
method
- Added
createAbsoluteOverlaySettings
and createRelativeOverlaySettings
methods which create non-modal OverlaySettings
based on predefined PositionSettings
. The methods are exposed off the IgxOverlayService
.
createAbsoluteOverlaySettings
creates non-modal OverlaySettings
with GlobalPositionStrategy
or ContainerPositionStrategy
if an outlet is provided. Accepts AbsolutePosition
enumeration, which could be Center
, Top
and Bottom
. Default is Center
. const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);
createRelativeOverlaySettings
creates OverlaySettings
with AutoPositionStrategy
, ConnectedPositioningStrategy
or ElasticPositionStrategy
. Accepts target, strategy and position. The target
is the attaching point or element for the component to show. The position strategy is a RelativePositionStrategy
enumeration, which defaults to Auto
. The position is a RelativePosition
enumeration. Possible values are Above
, Below
, Before
, After
and Default
. The default option is Default
, which positions the element below the target, left aligned. const targetElement = this.button.nativeElement;
const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings(
targetElement,
RelativePositionStrategy.Connected,
RelativePosition.Above);
IgxToast
- The component now utilizes the
IgxOverlayService
to position itself in the DOM.
- An additional input property
outlet
has been added to allow users to specify custom Overlay Outlets using the IgxOverlayOutletDirective
;
- The
position
property now accepts values of type IgxToastPosition
that work with strict templates.
IgxExpansionPanelHeader
onInteraction
is now cancelable
- Added
iconRef
property. This can be used to get a reference to the displayed expand/collapsed indicator. Returns null
if iconPosition
is set to NONE
.
10.1.0
General
igxCombo
- Behavioral Change - Change default positioning strategy from
ConnectedPositioningStrategy
to AutoPositionStrategy
. The Auto
strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
- Make
onSearchInput
event cancellable. The event args type has been changed to IComboSearchInputEventArgs
, which have the following properties: searchText
- holds the text typed into the search input, owner
- holds a reference to the combo component and cancel
- indicates whether the event should be canceled.
IgxOverlay
- Added new property
closeOnEscape
in OverlaySettings
that controls whether the overlay should close on escape keypress. By default closeOnEsc
is set to false
.
- Behavioral Change -
modal
overlays shown directly through the Overlay Service no longer close on Escape by default. That behavior can now be specified using the closeOnEscape
property.
igxDialog
- Added
closeOnEscape
- with it, the dialog can be allowed or prevented from closing when Esc
is pressed.
IgxNavbar
:
- Breaking Changes - The
igx-action-icon
has been renamed to igx-navbar-action
. It should get renamed in your components via ng update
;
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Breaking Change - The
selectedRows
method is now an @Input
property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.
- Breaking Change - Removed
IgxExcelStyleSortingTemplateDirective
, IgxExcelStyleHidingTemplateDirective
, IgxExcelStyleMovingTemplateDirective
, IgxExcelStylePinningTemplateDirective
and IgxExcelStyleSelectingTemplateDirective
directives for re-templating the Excel style filter menu. Added two new directives for re-templating the column operations and filter operations areas - IgxExcelStyleColumnOperationsTemplateDirective
and IgxExcelStyleFilterOperationsTemplateDirective
. Exposed all internal components of the Excel style filter menu in order to be used inside the templates.
- Breaking Change -
IgxColumnHiding
and IgxColumnPinning
components have been deprecated in favor of a component combining the their functionality - IgxColumnActions
which is used with either of the new IgxColumnPinning
and IgxColumnHiding
directives that specify the action to be triggered through the UI.
- Added
move
method which allows to move a column to a specified visible index. The method is exposed off the IgxColumnComponent
.
igxGrid
- Behavioral Change - For numeric columns, the onCellEdit arguments' newValue will now contain the numeric value that will be committed instead of the string input.
- Added
onScroll
event, which is emitted when the grid is scrolled vertically or horizontally.
- Each grid now expose a default handling for boolean column types. The column will display
check
or close
icon, instead of true/false by default.
igxTreeGrid
- Removed
onDataPreLoad
event as it is specific for remote virtualization implementation, which is not supported for the igxTreeGrid
. A more generic onScroll
event is exposed and can be used instead.
IgxTimePicker
- Added a disabled style for time parts outside of the minimum and maximum range.
igxDatePicker
- Added new property -
editorTabIndex
, that allows setting tabindex for the default editor.
New Theme
Ignite UI for Angular now has a new theme based on our own design system.
You can use one of the following mixins to include a dark or light indigo theme:
igx-indigo-light-theme
and igx-indigo-dark-theme
We also added two new palettes that go with the new theme, $light-indigo-palette
and $dark-indigo-palette
.
The following example shows how you can use the Indigo theme:
.indigo-theme {
@include igx-indigo-light-theme($light-indigo-palette);
}
.indigo-dark-theme {
@include igx-indigo-dark-theme($dark-indigo-palette);
}
New Features
igxButton
directive
- Added styles to support extended fab buttons.
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
IgxGridState
directive
- Added support for expansion states, column selection and row pinning.
- Added support for
IgxTreeGrid
and IgxHierarchicalGrid
(including child grids)
IgxColumn
- Added
byHeader
parameter to the autosize
method which specifies if the autosizing should be based only on the header content width.
IgxToast
message
property has been deprecated. You can place the message text in the toast content or pass it as parameter to show
method instead.
- An optional string parameter
message
has been added to show()
method.
IgxSnackbar
message
property has been deprecated. You can place the message text in the snackbar content or pass it as parameter to show
method instead.
- An optional string parameter
message
has been added to show()
method.
IgxNavbar
- Added new
igx-navbar-title, igxNavbarTitle
directive that can be used to provide custom content for navbar title. It would override the value of title
input property.
IgxCalendar
and IgxMonthPicker
viewDateChanged
emitted after the month/year presented in the view is changed after user interaction.
activeViewChanged
event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
viewDate
day value is always 1.
activeView
setter is now available as an input property.
IgxCombo
- Added
showSearchCaseIcon
to display a case sensitive search icon in the search input. Icon click allows the user to easily toggle the search case sensitivity.
10.0.0
General
igxGrid
- Behavioral Change - Group rows now display the group column's header name instead of field when one is available.
igx-select
, igx-combo
, igx-drop-down
- Behavioral Change - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
IgxTransaction
- The onStateUpdate
now emits with information of its origin. The emitted value is of type StateUpdateEvent
, which has two properties:
origin
- it can vary within the values of the TransactionEventOrigin
interface;
actions
- contains information about the transactions, that caused the emission of the event.
IgxPaginator
- The input overlaySettings
was introduced, which allows applying custom overlay settings for the component.
New Features
9.1.9
New Features
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Expose a setter for grid's
outlet
property, which can be used to set the outlet used to attach the grid's overlays to.
9.1.4
New Features
IgxList
- Added localization support.
9.1.1
General
IgxHierarchicalGrid
onGridInitialized
- New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
- Behavioral Change - When moving a column
DropPosition.None
is now acting like DropPosition.AfterDropTarget
.
9.1.0
General
Themes
- Breaking Change Change the default
$legacy-support
value to false in the igx-theme
function.
New Features
IgxDateTimeEditor
directive added.
- Allows the user to set and edit
date
and time
in a chosen input element.
- Can edit
date
or time
portion, using an editable masked input.
Additionally, can specify a desired display
and input
format
, as well as min
and max
values.
A basic configuration scenario setting a Date object as a value
:
<igx-input-group>
<input type="text" igxInput igxDateTimeEditor [value]="date"/>
</igx-input-group>
- Two-way data-binding via an ngModel:
<igx-input-group>
<input type="text" igxInput igxDateTimeEditor [(ngModel)]="date"/>
</igx-input-group>
IgxDateRangePicker
component added.
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialog
and dropdown
modes.
- Added
IgxDateRangeStartComponent
and IgxDateRangeEndComponent
.
- The default template consists of a single readonly field:
<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
- Projection of input fields using
igxDateTimeEditor
<igx-date-range-picker>
<igx-date-range-start>
<input igxInput igxDateTimeEditor [(ngModel)]="range.start">
</igx-date-range-start>
<igx-date-range-end>
<input igxInput igxDateTimeEditor [(ngModel)]="range.end">
</igx-date-range-end>
</igx-date-range-picker>
- Added
IgxPickerToggleComponent
which allows templating of the default icon in the input through igxPrefix
and igxSuffix
.
- default template:
<igx-date-range-picker>
<igx-picker-toggle igxSuffix>
<igx-icon>calendar_view_day</igx-icon>
</igx-picker-toggle>
</igx-date-range-picker>
- with projections:
<igx-date-range-picker>
<igx-date-range-start>
...
<igx-picker-toggle igxPrefix>
<igx-icon>calendar_view_day</igx-icon>
</igx-picker-toggle>
...
</igx-date-range-start>
<igx-date-range-end>
...
</igx-date-range-end>
</igx-date-range-picker>
IgxActionStrip
component added.
Provides a template area for one or more actions. In its simplest form the Action Strip
is an overlay of any container and shows additional content over that container.
<igx-action-strip #actionstrip>
<igx-icon (click)="doSomeAction()"></igx-icon>
</igx-action-strip>
igxSplitter
component added.
Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the type
input.
<igx-splitter [type]="type">
<igx-splitter-pane>
...
</igx-splitter-pane>
<igx-splitter-pane>
...
</igx-splitter-pane>
</igx-splitter>
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Added ability to pin rows to top or bottom depending on the new
pinning
input.
And new API methods pinRow
and unpinRow
.<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { rows: RowPinningPosition.Bottom };
this.grid.pinRow(rowID);
- Added support for pinning columns on the right. Change the position of pinning using the new
pinning
input.<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added new properties for paging:
totalRecords
set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
pagingMode
- accepts GridPagingMode
enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
- Added functionality for column selection.
columnSelection
property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
selected
property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
selectable
property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
onColumnSelectionChange
event is added for the IgxGrid
. It is emitted when the column selection is changed.
excelStyleSelectingTemplate
property is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.
selectedColumns
API method is added for the IgxGrid
. It allows to get all selected columns.
selectColumns
API method is added for the IgxGrid
. It allows to select columns by passing array of IgxColumnComponent or column fields.
deselectColumns
API method is added for the IgxGrid
. It allows to deselect columns by passing array of IgxColumnComponent or column fields.
deselectAllColumns
API method is added for the IgxGrid
. It allows to deselect all columns.
getSelectedColumnsData
API method is added for the IgxGrid
. It allows to get the selected columns data.
Added keyBoard navigation support in the IgxGrid headers. Now is possible to navigate with the arrows keys through grid headers. Also we provide a number of key combinations that trigger a different column functionality like filtering, sorting, grouping and etc. You can read more information in the Grid Specification.
- Behavioral Change
- you can not use
tab
key to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys.
- when you are in edit mode with
tab
key you can navigate to the next editable cell.
page up
and page down
keys will perform action only if the focused element is the tbody of the grid.
- The grid introduces the following basic
tab stops
:
- Toolbar / Group by Area if existing;
- The first cell in the header row;
- The first cell in the first body row;
- The first cell in column summary if exists;
- Pager UI;
IgxCombo
:
- Added
autoFocusSearch
input that allows to manipulate the combo's opening behavior. When the property is true
(by default), the combo's search input is focused on open. When set to false
, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
IgxToast
:
- Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
IgxDrag
- Added
igxDragIgnore
directive that allows children of the igxDrag
element to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored.
- Added
dragDirection
input that can specify only one direction of dragging or both.
IgxChip
- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndex
input so it can support change detection as well.
IgxHighlightDirective
- New
metadata
property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
RTL Support
igxSlider
have full right-to-left (RTL) support.
9.0.1
- Breaking Changes
- Remove
$base-color
from igx-typography. The igx-typography class now inherits the parent color.
9.0.0
General
- Added support for the Ivy renderer.
Breaking Changes The following classes and enumerators have been renamed. Using ng update
will apply automatically migrate your project to use the new names.
IgxDropDownBase
-> IgxDropDownBaseDirective
IgxDropDownItemBase
-> IgxDropDownItemBaseDirective
IgxGridBaseComponent
-> IgxGridBaseDirective
IgxRowComponent
-> IgxRowDirective
IgxHierarchicalGridBaseComponent
-> IgxHierarchicalGridBaseDirective
IgxMonthPickerBase
-> IgxMonthPickerBaseDirective
AvatarType
-> IgxAvatarType
Size
-> IgxAvatarSize
Type
-> IgxBadgeType
SliderType
-> IgxSliderType
TabsType
-> IgxTabsType
Breaking Changes Due to a breaking change in Angular 9 with Ivy, Hammer providers are no longer included by default. You can find more information at: https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-9 . Because of this change the following components require HammerModule
to be imported in the root module of the application in order for user interactions to work as expected:
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Breaking Change - Hierarchical grid children no longer use the same
IgxTransactionService
instance and transaction handling should be modified to address each grid's transactions separately.
- Behavioral Change - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
Breaking Change - The following input and output have been deprecated for the igxHierarchicalGrid
and will be removed in future versions:
hierarchicalState
-> expansionStates
should be used instead.
hierarchicalStateChange
-> expansionStatesChange
should be used instead.
igxGridState
directive added to make it easy for developers to save and restore the grid state. The directive exposes the getState
and setState
methods to save/restore the state and an options
input property to exclude features.
IgxCarousel
:
- Breaking Changes -The carousel slides are no longer array, they are changed to QueryList.
- Behavioral change - When slides are more than 5, a label is shown instead of the indicators. The count limit of visible indicators can be changed with the input
maximumIndicatorsCount
IgxAvatar
:
- Breaking Changes - renamed the
default
enumeration member to custom
in IgxAvatarType
;
IgxBadge
:
- Breaking Changes - renamed the
default
enumeration member to primary
in IgxBadgeType
;
IgxCard
:
- Breaking Changes - renamed the
default
enumeration member to elevated
in IgxCardType
;
- Breaking Changes - renamed the
default
enumeration member to start
in IgxCardActionsLayout
;
IgxDivider
:
- Breaking Changes - renamed the
default
enumeration member to solid
in IgxDividerType
;
- Breaking Changes - renamed the
isDefault
getter to isSolid
;
IgxProgress
:
- Breaking Changes - renamed the
danger
enumeration member to error
in IgxProgressType
;
- Breaking Changes - renamed the
danger
getter to error
;
IgxTabs
:
- Breaking Changes - The
tabsType
input property has been renamed to type
. It should get renamed in your components via ng update
;
igxOverlay
:
- Behavioral Change -
igxOverlay
- no longer persists element scrolling out of the box
. In order to persist an element scroll position after attaching the element to an overlay, handle the exposed onAppended
overlay event and manage/restore the scroll position.
New Features
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
:
IgxSlider
:
- Breaking Change -
isContinuous
- input has been deleted. The option is not supported anymore.
primaryTicks
input was added. Which sets the number of primary ticks
secondaryTicks
input was added. Which sets the number of secondary ticks.
showTicks
input was added. Which show/hide all slider ticks and tick labels.
primaryTickLabels
input was added. Which shows/hides all primary tick labels.
secondaryTickLabels
input was added. Shows/hides all secondary tick labels.
ticksOrientation
input was added. Allows to change ticks orientation to top|bottom|mirror.
tickLabelsOrientation
input was added. Allows you to change the rotation of all tick labels from horizontal to vertical(toptobottom, bottomtotop).
igxSliderTickLabel
directive has been introduced. Allows you to set a custom template for all tick labels.
onValueChanged
- new output has been exposed. This event is emitted at the end of every slide interaction.
IgxCarousel
:
keyboardSupport
input is added, which can be used to enable and disable keyboard navigation
gesturesSupport
input is added, which can be used to enable and disable gestures
maximumIndicatorsCount
input is added, which can be used to set the number of visible indicators
indicatorsOrientation
input is added, which can be used to set the position of indicators it can be top or bottom
animationType
input is added, which can be used to set animation when changing slides
indicatorTemplate
directive is added, which can be used to provide a custom indicator for carousel. If this property is not provided, a default indicator template will be used instead.
nextButtonTemplate
directive is added, which is used to provide a custom next button template. If not provided, a default next button is used.
prevButtonTemplate
directive is added, which is used to provide a custom previous button template. If not provided, a default previous button is used.
IgxSelect
:
- adding
IgxSelectHeaderDirective
and IgxSelectFooterDirective
. These can be used to provide a custom header, respectively footer templates for the igxSelect
drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
IgxCombo
:
- Added
displayText
property to the combo's onSelectionChange
event args. The property contains the text that will be populated in the combo's text box after selection completes. This text can be overwritten in order to display a custom message, e.g. "3 items selected":<igx-combo [data]="people" valueKey="id" displayKey="name" placeholder="Invite friends..." (onSelectionChange)="handleSelection($event)">
export class MyInvitationComponent {
public people: { name: string; id: string }[] = [...];
...
handleSelection(event: IComboSelectionChangingEventArgs) {
const count = event.newSelection.length;
event.displayText = count > 0 ? `${count} friend(s) invited!` : `No friends invited :(`;
}
...
}
IgxDropDown
:
clearSelection
method is added, which can be used to deselect the selected dropdown item
IgxToggleDirective
:
setOffset
method added. It offsets the content along the corresponding axis by the provided amount.
IgxOverlayService
:
setOffset
method added. It offsets the content along the corresponding axis by the provided amount.
IgxCircularProgressBar
:
- added
IgxProgressBarGradientDirective
to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:<igx-circular-bar [value]="77">
<ng-template igxProgressBarGradient let-id>
<svg:linearGradient [id]="id" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#05a"/>
<stop offset="100%" stop-color="#0a5"/>
</svg:linearGradient>
</ng-template>
</igx-circular-bar>
changed the igx-progress-circular-theme
to accept a list of 2 colors for the $progress-circle-color
argument, making it easier to modify the default gradient:
$theme: igx-progress-circular-theme(
$progress-circle-color: red blue
);
@include igx-progress-circular($theme);
- RTL support
IgxForOf
8.2.6
New Features
IgxSelectItem
text
input is added. By default, the Select component will display the selected item's element inner text. In cases with a more complex item template, where more than just text interpolation is used, set the text property to specify what to display in the select field when the item is selected.
8.2.4
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- The header text of the columns and the column groups now has the
title
attribute set to it in order to expose a native browser tooltip.
RTL Support
Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes.
For CSS-based projects add node_modules/igniteui-angular/styles/igniteui-angular-rtl.css
to your angular.json styles collection.
For Sass-based projects pass $direction
to the igx-core
mixin in your root stylesheet.
Example:
@include igx-core($direction: rtl);
Currently the following components have only partial RTL support:
New Features
- Columns now expose the
cellStyles
property which allows conditional styling of the column cells. Similar to cellClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation.styles = {
color: '#123456',
'font-family': 'monospace'
'font-weight': (_, __, value) => value.startsWith('!') : 'red' : 'inherit'
};
The callback signature for both cellStyles
and cellClasses
is now changed to
(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
8.2.3
class MySummary extends IgxNumberSummaryOperand {
constructor() {
super();
}
operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
const result = super.operate(allData.map(r => r[fieldName]));
result.push({ key: 'test', label: 'Total Discounted', summaryResult: allData.filter((rec) => rec.Discontinued).length });
return result;
}
}
8.2.0
New theme
Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.
Depending on your use case you can use one of the following mixins:
igx-fluent-theme
and igx-fluent-dark-theme
We also added two new palettes that go with the new theme, $fluent-word-palette
and $fluent-excel-palette
.
Next example shows how you can use the Fluent theme.
.fluent-word-theme {
@include igx-fluent-theme($fluent-word-palette);
}
.fluent-excel-dark-theme {
@include igx-fluent-dark-theme($fluent-excel-palette);
}
Theme Changes
igx-badge-theme
- Removed the $disable-shadow
property to mitigate confusion when specifying $shadow
explicitly.
For more information about the theming please read our documentation
New Features
General
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
isCellSelected
method has been deprecated. Now you can use selected
property.
rowSelectable
property has been deprecated. Now you can use rowSelection
property to enable row selection and also you can show and hide the row selectors by setting hideRowSelectors
property to true or false (which is the default value).
- Removed deprecated event
OnFocusChange
IgxGridBaseComponent
exposes a new property, dataView
that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid
- Breaking Change
igxExcelStyleSortingTemplate
directive is renamed to igxExcelStyleSorting
.
- Breaking Change
igxExcelStyleMovingTemplate
directive is renamed to igxExcelStyleMoving
.
- Breaking Change
igxExcelStyleHidingTemplate
directive is renamed to igxExcelStyleHiding
.
- Breaking Change
onRowSelectionChange
event arguments are changed. The row
property has been removed and the properties added
, removed
and cancel
are newly added.
- Breaking Change
igxExcelStylePinningTemplate
directive is renamed to igxExcelStylePinning
.
- Breaking Change
onRowDragEnd
and onRowDragStart
event arguments are changed - owner
now holds reference to the grid component instance, while dragDirective
hold reference to the drag directive.
- Behavioral Change The behavior of the
isLoading
input no longer depends on the state of the data the grid binds to. Setting it to true
now shows a loading indicator until it is disabled by the user.
IgxCombo
- Combo selection is now consistent when
valueKey
is defined. When valueKey
is specified, selection is based on the value keys of the items. For example:<igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>
export class MyCombo {
...
public combo: IgxComboComponent;
public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
...
ngOnInit() {
this.combo.selectItems([0, 1]);
}
}
- Breaking Change When using
[valueKey]
, combo methods, events and outputs cannot be handled with data item references.
- For more information, visit the component's readme
IgxDrag
- Deprecated inputs -
hideBaseOnDrag
, animateOnRelease
, visible
.
- Deprecated methods -
dropFinished
.
- Breaking Change
ghostImageClass
input is renamed to ghostClass
.
- Breaking Change
dragGhostHost
input is renamed to ghostHost
.
- Breaking Change
returnMoveEnd
input is renamed to transitioned
.
- Breaking Change
onDragStart
output is renamed to dragStart
.
- Breaking Change
onDragEnd
output is renamed to dragEnd
.
IgxDrop
- Breaking Change Default drop strategy is now changed to not perform any actions.
- Breaking Change
onEnter
output is renamed to enter
.
- Breaking Change
onOver
output is renamed to over
.
- Breaking Change
onLeave
output is renamed to leave
.
- Breaking Change
onDrop
output is renamed to dropped
.
- Breaking Change Interfaces
IgxDropEnterEventArgs
, IgxDropLeaveEventArgs
are both now called IDropBaseEventArgs
.
- Breaking Change Interfaces
IgxDropEventArgs
is renamed to IDropDroppedEventArgs
.
- Breaking Change Outputs
enter
, over
, leave
(former onEnter
, onOver
, onLeave
) now have arguments of type IDropBaseEventArgs
- Breaking Change Output
dropped
(former onDrop
) now have arguments of type IDropDroppedEventArgs
8.1.4
IgxDialog
new @Input positionSettings
is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
8.1.3
IgxCombo
- Combo
onSelectionChange
events now emits the item(s) that were added to or removed from the collection:<igx-combo (onSelectionChange)="handleChange($event)">
export class Example {
...
handleChange(event: IComboSelectionChangingEventArgs) {
console.log("Items added: ", [...event.added]);
console.log("Items removed: ", [...event.removed]);
}
}
8.1.2
New Features
IgxDatePicker
valueChange
event is added.
8.1.0
New Features
IgxBottomNav
now supports an igx-tab
declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
- You are allowed to customize tab items with labels, icons and even templates.
IgxTabs
now supports an igx-tab-item
declaration mode. When in this mode, groups declarations are not accepted and tab items' content is not rendered.
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
- You are allowed to customize tab items with labels, icons and even templates.
IgxGrid
- Behavioral Change - paging now includes the group rows in the page size. You may find more information about the change in the GroupBy Specification
IgxColumnGroup
- Re-templating the column group header is now possible using the
headerTemplate
input property or the igxHeader
directive.
igx-grid-footer
igx-paginator
IgxCombo
- Input
[overlaySettings]
- allows an object of type OverlaySettings
to be passed. These custom overlay settings control how the drop-down list displays.
IgxForOf
now offers usage of local variables even
, odd
, first
and last
to help with the distinction of the currently iterated element.
8.0.2
8.0.1
- General
- Importing ES7 polyfill for Object (
'core-js/es7/object'
) for IE is no longer required.
New Features
IgxDropDown
now supports DisplayDensity
.
[displayDensity]
- @Input()
added to the igx-drop-down
. Takes prevelance over any other DisplayDensity
provider (e.g. parent component or DisplayDensityToken
provided in module)
- The component can also get it's display density from Angular's DI engine (if the
DisplayDensityToken
is provided on a lower level)
- Setting
[displayDensity]
affects the control's items' and inputs' css properties, most notably heights, padding, font-size
- Available display densities are
compact
, cosy
and comfortable
(default)
- Behavioral Change - default
igx-drop-down-item
height is now 40px
(down from 48px
)
IgxCombo
- Setting [displayDensity]
now also affects the combo's items
- Behavioral Changes
[itemHeight]
defaults to 40
([displayDensity]
default is comfortable
)
[itemsMaxHeight]
defaults to 10 * itemHeight
.
- Changing
[displayDensity]
or [itemHeight]
affect the drop-down container height if [itemsMaxHeight]
is not provided
- Setting
[itemHeight]
overrides the height provided by the [displayDensity]
input
IgxSelect
- Setting [displayDensity]
now also affects the select's items
- Behavioral Change - default
igx-select-item
height is now 40px
(down from 48px
)
IgxChip
hideBaseOnDrag
input is added that allow the chip base that stays at place to be visible while dragging it.
animateOnRelease
input is added that allows to disable the animation that returns the chip when the chip is released somewhere.
IgxTransaction
- getState
accepts one optional parameter pending
of boolean
type. When true
is provided getState
will return state
from pending states. By default getState
is set to false
.
8.0.0
Theming
: Add component schemas for completely round and completely square variations. Can be mixed with the existing light and dark component schemas. For instance: $light-round-input: extend($_light-input-group, $_round-shape-input-group);
There are also prebuilt schema presets for all components (light-round/dark-round and light-square/dark-square), namely $light-round-schema, $light-dark-schema, $light-square-schema, $dark-square-schema
;
IgxCombo
: Removed the following deprecated (since 6.2.0) template selectors:
#emptyTemplate
#headerTemplate
#footerTemplate
#itemTemplate
#addItemTemplate
#headerItemTemplate
igxTimePicker
and igxDatePicker
openDialog()
now has an optional [target: HTMLElement]
parameter. It's used in mode="dropdown"
and the drop down container is positioned according to the provided target.
- The custom drop down template target is no longer marked with
#dropDownTarget
, instead it's provided as an HTMLElement
to the openDialog()
method.
- By default, the
igxDatePicker
drop down target is changed from the igxInput
element to the igxInputGroup
element.
onClosing
event is added.
- Breaking Change
onOpen
event is renamed to onOpened
.
- Breaking Change
onClose
event is renamed to onClosed
.
- Behavioral Change - action buttons are now available in the dropdown mode.
- Feature
igxDatePicker
and igxTimePicker
now provide the ability for adding custom action buttons. Read up more information in igxDatePicker ReadMe or igxTimePicker ReadMe
IgxToggleAction
/ IgxTooltip
: Removed the deprecated closeOnOutsideClick
Input that has been superseded by overlaySettings
in 6.2.0.
IgxList
- The list component has been refactored. It now includes several new supporting directives:
igxListThumbnail
- Use it to mark the target as list thumbnail which will be automatically positioned as a first item in the list item;
igxListAction
- Use it to mark the target as list action which will be automatically positioned as a last item in the list item;
igxListLine
- Use it to mark the target as list content which will be automatically positioned between the thumbnail and action;
igxListLineTitle
- Use it to mark the target as list title which will be automatically formatted as a list-item title;
igxListLineSubTitle
- Use it to mark the target as list subtitle which will be automatically formatted as a list-item subtitle;
<igx-list>
<igx-list-item [isHeader]="true">List items</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail></igx-avatar>
<h1 igxListLineTitle>List item title</h1>
<h3 igxListLineSubTitle>List item subtitle</h3>
<igx-icon igxListAction>info</igx-icon>
</igx-list-item>
</igx-list>
<igx-list>
<igx-list-item [isHeader]="true">List items</igx-list-item>
<igx-list-item>
<igx-avatar igxListThumbnail></igx-avatar>
<span igxListLine>Some content</span>
<igx-icon igxListAction>info</igx-icon>
</igx-list-item>
</igx-list>
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Breaking Change The condition parameter of the
filterGlobal
method is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns.
7.3.4
IgxGrid
- summaries
clearSummaryCache()
and recalculateSummaries()
methods are now removed from the IgxGrid API, beacause they are no longer needed; summaries are updated when some change is perform and the summary cache is cleared automatically when needed;
IgxGrid
, IgxTreeGrid
, IgxHierarchicalGrid
- Breaking Change The condition parameter of the
filterGlobal
method is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns.
New feature
Bug Fixing
- igx-input: Top of Japanese characters get cut off in Density Compact mode #4752
- When no condition is provided, filter() method of grid throws undescriptive error #4897
- [IE11][igx-grid][MRL] header cell is not row-spanned. #4825
- Select's label is positioned incorrectly #4236
- [igx-grid] Filtering row's chips area is not resized when resizing window. #4906
hideGroupedColumns
hides the whole MRL group #4714
- An error is returned when changing rowEditable input and a cell is opened in edit mode #4950
- Row editing border style is not applied correctly for the first record when there is grouping #4968
- Cell navigation does not work along with Multi Row Layout group #4708
- When no condition is provided, filter() method of grid throws undescriptive error #4897
- In slider with type Range when change the lower value to be equal or greater than the upper the range is not correct #4562
- When change the slider type at run time the slider is not updated correctly #4559
- Range Slider Thumps collapsing #2622
- Angular httpinterceptor(jwt token header) not working after importing IgxTreeGridModule in lazy loaded module #4285
- [igx-grid] "quick clicking twice resizer " can sometimes lead to unable to sort. #4858
- TimePicker "hour mode" #4679
7.3.3
igx-core()
now includes some styles for printing layout.
In order to turn them off, you need to pass an argument and set it to false
@include igx-core($print-layout: false);
Pager
- Behavioral Change - The pager is now hidden when there are no records in the grid.
Bug fixes
- Row editing styles are not applied correctly within multi row layout grid #4859
- Provide a way to animate row drag, when it is released #4775
- There is lag on checking/unchecking an item in an Excel Style Filter with a lot of items #4862
- Make dragIndicatorIconTemplate @ContentChild in the igxHierarchicalGrid #4769
- Add PostDeploy.ps1 script into the repo #4887
- Provide a way to animate row drag, when it is released #4775
- Feature-request: IgxGrid improve Printing Experience #1995
- When column is scrolled and open excel filter, its position is not correct #4898
- IgxCombo is not properly clearing subscription #4928
- "(Blanks)" appears unchecked on reopening the ESF UI if the underlying value is an empty string. #4875
- [igx-tree-grid] loading indicator not shown in IE11 #4754
- Filtering conditions drop down does not behave consistently when the button that opens it is clicked multiple times #4470
7.3.2
Bug Fixes
- Time picker component fails on dropdown mode in combination with igxTimePickerTemplate modifications #4656
- In IE11 when chips length is bigger then filter row scrolls position is not correct #4699
- Not able to change filter option in excel style filter. #4347
- [igx-grid] rendering performance becomes extremely poor when binding data after initialization. #4839
- Group comparer is not taken into consideration when column is dragged to grouped area #4663
7.3.1
igx-core()
now includes some styles for printing layout. In order to turn them off, you need to pass an argument and set it to false
@include igx-core($print-layout: false);
IgxGrid
Custom keyboard navigation
onFocusChange
event is deprecated.
onGridKeydown
event is exposed which is emitted when keydown
is triggered over element inside grid's body
navigateTo
method allows you to navigate to a position in the grid based on provided rowindex
and visibleColumnIndex
, also to execute a custom logic over the target element through a callback function that accepts { targetType: GridKeydownTargetType, target: Object }
getNextCell
returns ICellPosition
which defines the next cell, according to the current position, that match specific criteria. You can pass callback function as a third parameter of getPreviousCell
method
getPreviousCell
returns ICellPosition
which defines the previous cell, according to the current position, that match specific criteria. You can pass callback function as a third parameter of getPreviousCell
method.
IgxTransactionService
now can commit
and clear
transaction(s) by record id with an optional parameter. The commit
method will apply to the data all transactions for the provided id
. The clear
method will remove all transactions for the id
from the transactions log. Additionally both will remove all actions from the undo stack matching the provided id
.
Bug fixes
- The ESF animations for opening and closing do not work #4834
- IgxButtonGroup does not respect compact styles #4840
- Not able to change filter option in excel style filter. #4347
- Broken links enhancements #4830
- rowDraggable is applied to grids from all hierarchical levels in hierarchical grid #4789
- [igx-grid][IE11] filtering problems with IME mode. #4636
- Filtering operation crashes when applying filter on a column with many unique values. #4723
- Emit onColumnVisibilityChanged when hiding a column through ESF UI. #4765 #4792
- onColumnVisibilityChanged event is not fired when hiding a column through ESF. #4765
- "Select All" should not be treated as a match when searching. #4020
- Opening the ESF dialog throws an error #4737
- Recalculate igxfor sizes for excel style search list on after view init #4804
- igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
- When grid width is less than 400px and open filter row the arrows for chips are previewed #4700
- Canceling onRowDragStart leaves the drag ghost in the DOM #4802
7.3.0
Features
Bug Fixes
- Grid remains in pending state after commiting row edit w/o changes #4680
- Filter condition dropdown is not closed on tab navigation #4612
- When filter row is opened navigating with shift and tab on first cell does not selects the cancel button #4537
- Focus is not moved from the filter row to the summary row when the grid has no records #4613
- igx-carousel problem with lost focus #4292
- List items are shifted down on search if the list was scrolled down beforehand. #4645
- [igx-grid] some cells are not rendered when resizing window. #4568
- [igx-grid] after being grouped then resized, horizontal scrolling causes column header misalignment with data cell #4648
- Cells content is misaligned when group by a column and scroll horizontal #4720
- When hide/show columns the grid has empty space #4505
7.2.12
New features
- igxSlider - exposing new
labels
property accepting a collection of literal values that become equally spread over the slider, by placing each element as a thumb label.
- igxSlider - deprecate isContiunous property.
IgxDropDown
now supports DisplayDensity
.
[displayDensity]
- @Input()
added to the igx-drop-down
. Takes prevelance over any other DisplayDensity
provider (e.g. parent component or DisplayDensityToken
provided in module)
- The component can also get it's display density from Angular's DI engine (if the
DisplayDensityToken
is provided on a lower level)
- Setting
[displayDensity]
affects the control's items' and inputs' css properties, most notably heights, padding, font-size
- Available display densities are
compact
, cosy
and comfortable
(default)
- Behavioral Change - default item
igx-drop-down-item
height is now 40px
(down from 48px
)
IgxCombo
- Setting [displayDensity]
now also affects the combo's items
- Setting
[itemHeight]
overrides the height provided by the [displayDensity]
input
IgxSelect
- Setting [displayDensity]
now also affects the select's items
Bug Fixes
- In slider with type Range when change the lower value to be equal or greater than the upper the range is not correct #4562
- When change the slider type at run time the slider is not updated correctly #4559
- Range Slider Thumps collapsing #2622
- When no condition is provided, filter() method of grid throws undescriptive error #4897
- [igx-grid] Filtering row's chips area is not resized when resizing window. #4906
- Add PostDeploy.ps1 script into the repo #4887
- An error is returned when a row is opened in edit mode and click to search the next item #4902
- [igx-grid] "quick clicking twice resizer " can sometimes lead to unable to sort. #4858
- Child summaries disappears when edit a cell and press tab on click on cell in same row when rowEditable is true #4949
- When no condition is provided, filter() method of grid throws undescriptive error #4897
7.2.11
Bug fixes
- When column is scrolled and open excel filter, its position is not correct #4898
- "(Blanks)" appears unchecked on reopening the ESF UI if the underlying value is an empty string. #4875
- There is lag on checking/unchecking an item in an Excel Style Filter with a lot of items #4862
- Group comparer is not taken into consideration when column is dragged to grouped area #4663
- Filtering conditions drop down does not behave consistently when the button that opens it is clicked multiple times #4470
7.2.10
Features
- Condense grid summaries #4694
Bug Fixes
- When grid width is less than 400px and open filter row the arrows for chips are previewed #4700
- Time picker component fails on dropdown mode in combination with igxTimePickerTemplate modifications #4656
- In IE11 when chips length is bigger then filter row scrolls position is not correct #4699
- The ESF animations for opening and closing do not work #4834
- Not able to change filter option in excel style filter. #4347
- [igx-grid] rendering performance becomes extremely poor when binding data after initialization. #4839
7.2.9
igx-core()
now includes some styles for printing layout.
In order to turn them off, you need to pass an argument and set it to false
@include igx-core($print-layout: false);
Pager
- Behavioral Change - The pager is now hidden when there are no records in the grid.
Bug fixes
- ElasticPositionStrategy should resize shown element with Center/Middle directions #4564
- onColumnVisibilityChanged event is not fired when hiding a column through ESF. #4765
- Filtering operation crashes when applying filter on a column with many unique values. #4723
- "Select All" should not be treated as a match when searching. #4020
- igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
- Error is thrown when press escape in the filter row #4712
- Opening the ESF dialog throws an error #4737
- [igx-grid][IE11] "Error: ViewDestroyedError: Attempt to use a destroyed view: detectChanges" is thrown when closing filtering row. #4764
- [igx-grid] some cells don't go into edit state or selected state when resizing window. #4746
- igx-tree-grid when no data in grid pagination shows wrong #4666
- ElasticPositionStrategy should resize shown element with Center/Middle directions #4564
- ESF custom dialog new filter not fully visible #4639
- igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949
- Grid height is calculated wrongly as grid width narrows #4745
- [igx-grid][IE11] filtering problems with IME mode. #4636
7.2.8
IgxGrid
Custom keyboard navigation
onFocusChange
event is deprecated.
onGridKeydown
is exposed. The event will emit
IGridKeydownEventArgs { targetType: GridKeydownTargetType; target: Object; event: Event; cancel: boolean; }
navigateTo(rowIndex: number, visibleColumnIndex: number, callback({targetType, target: Object }))
- this method allows you to navigate to a position in the grid based on provided rowindex
and visibleColumnIndex
;
getNextCell(currentRowIndex, currentvisibleColumnIndex, callback(IgxColumnComponent))
- returns { rowIndex, visibleColumnIndex }
which defines the next cell, that match specific criteria according to the current position
getPreviousCell(currentRowIndex, currentvisibleColumnIndex, callback(IgxColumnComponent))
- returns { rowIndex, visibleColumnIndex }
which defines the previous cell, that match specific criteria according to the current position
Bug Fixes
- Grid remains in pending state after commiting row edit w/o changes #4680
- Filter condition dropdown is not closed on tab navigation #4612
- When filter row is opened navigating with shift and tab on first cell does not selects the cancel button #4537
- Focus is not moved from the filter row to the summary row when the grid has no records #4613
- igx-carousel problem with lost focus #4292
- List items are shifted down on search if the list was scrolled down beforehand. #4645
- [igx-grid] some cells are not rendered when resizing window. #4568
- [igx-grid] after being grouped then resized, horizontal scrolling causes column header misalignment with data cell #4648
- Cells content is misaligned when group by a column and scroll horizontal #4720
- When hide/show columns the grid has empty space #4505
7.2.7
Bug fixes
- Custom filter dialog Excel-Style Filtering does not save the selected operand #4548
- Wrong endEdit call on data operation pipes subscribe #4313
- TreeGrid does not have default loading template #4624
- [igx-grid] Question about resizing behavioral change after v7.2.1. #4610
- [igx-grid] onSelection event comes to emit after ending edit mode. #4625
- Error is thrown when trying to open datepicker with Space key in IE #4495
- DatePicker dropdown overlaps the input when it appears top #4526
- Custom filter dialog of the Excel-style Filtering does not display the selected condition in the correct format #4525
- [igx-grid] group row is duplicated when collapsing all and then expanding a group row. #4650
- Fix scroll wheel tests due to creating wheel event with deltaY sets also wheelDeltaY (PR #4659)
- Update Canonical and HrefLang links for EN and JP environments #4674
- In the Drag and Drop dev sample the background color is not changed in IE and Edge #4597
7.2.6
igxGrid
- Feature The
groupsRecords
property now returns the full grouping tree as in 7.1 and also includes the grouping information for all pages.
Bug Fixes
- Unreadable icon color when icon is used as a tooltip target with dark-theme #4477
- [igx-tabs] Selection indicator is not resized correctly #4420
- Faulty urls in Typescript #4546
- igx-list theme docs #4390
- Filtering conditions drop down does not behave consistently when the button that opens it is clicked multiple times #4470
- Message 'No records found.' is still previewed when reset filter #4484
- The text in the filter column textbox truncates in the igx-grid component #4496
- Excel style filter does not apply the filter when the value is 0 #4483
- When hold arrow up or down key on a month the focus changes to the year #4585
- Putting two circular progress bars results in duplicate IDs #4410
- igxGrid does not clear groupsRecords when all columns get ungrouped #4515
7.2.5
igxDrop
onEnter
, onLeave
and onDrop
events now have new arguments for originalEvent
, offsetX
and offsetY
relative to the container the igxDrop is instanced.
IgxList
- Excel-Style Filtering and Quick Filtering user interfaces now display the date picker's calendar in a dropdown.
IgxCard
- The card component has been refactored. It now includes several new supporting components/directives:
igxCardHeaderTitle
- tag your headings placed in the igx-card-header
container to be displayed as a card title;
igxCardHeaderSubtitle
- tag your headings placed in the igx-card-header
container to be displayed as a card subtitle;
igxCardThumbnail
- tag anything placed in the igx-card-header
as a thumb to be placed to the left of your titles;
igx-card-header
- the card header can now detect and automatically position igx-avatar
s placed in it;
igx-card-media
- wrap images or videos that will be automatically sized for you;
igx-card-actions
- the card actions can now detect and automatically position all igxButton
s placed in it;
- The card has a new
type
property. It can be set to outlined
to get the new outlined card look;
- The card has a new
horizontal
property. When set to true, the layout will become horizontally aligned;
- New Directive
igx-divider
- The igx-divider is a thin, configurable line that groups content in lists and layouts.
Bug Fixes
- Row editing overlay is not visible when grid has either 1 or 2 rows and height is not set. #4240
- Ctrl + Right Arrow is not working in an expanded child grid in 7.2.x #4414
- In EI11 and error is returned when filter by date #4434
- Calendar should be closed when scrolling is initiated #4099
- The sync service for the horizontal virtualization returns invalid cache values in certain scenarios #4460
- Unreadable icon color when icon is used as a tooltip target with dark-theme #4477
- When first tree grid column is with type date the calendar mode is not correct #4457
- When grid is grouped the search does not scroll to the find result #4327
- Calendar should be closed when scrolling is initiated #4099
- [igx-list] IgxListItem.index returns wrong index when igx-list is virtualized by igxForOf #4465
- [igx-grid] groupsRepcords is not updated correctly when grouping/ungrouping. #4479
- Exceptions are thrown by igxHGrid when columns don't have initial width, or it has been set as a percentage #4491
- Change date pickers' mode to 'dropdown' in all filtering UIs. #4493
- The radio-group display cannot be overridden #4402
- Filtered column header goes over the RowSelectors and groups when scroll horizontal #4366
- [igx-grid] description about onColumnMovingEnd is not correct. #4452
- IgxTabs removes custom added class #4508
7.2.4
New feature
- Grid rendering speed
- Grid grouping rendering speed
- Grid vertical scrolling using the scroll arrows
- Grid horizontal scrolling using the scroll arrows
- Grid cell focusing time
- Typing a character in an inline editor
Bug fixes
- IgxForOf - Virtual item index with remote data #4455
- If grid has height in %(or no height) and filtering is enabled, then height is not calculated correctly. #4458
- 3rd level child does not scroll with keyboard nav #4447
- When in column group a column is hidden in the excel style filter LEFT and RIGHT buttons are enabled #4412
- Column Moving keydown.escape HostListener needs refactoring #4296
- Hierarchical Grid: scrolled child views remain after the root grid has been destroyed #4440
- When child grids have width in % (or no width) and there is horizontal scrollbar the vertical scrollbar is not visible. #4449
- Opening the Filtering dropdown twice in an igxHierarchicalGrid results in warning messages in the browser console #4436
- for-of init optimizations for grids #4374
- Changing columns dynamically in the Hierarchical Grid resets root column list to contain child columns. #4337
- Cell is not selected on click [IE] #1780
- igx-grid: Uncommitted IME text gets lost when Enter key is pressed in an edit cell template. #4314
7.2.3
Improvements
IPinColumnEventArgs
new property - added a new property isPinned
to the IPinColumnEventArgs
interface. Now the onColumnPinning
event emits information whether the column is pinned or unpinned.
igxGrid
igxFilterCellTemplate
directive added that allows retemplating of the filter cell.
IgxColumnComponent
now has filterCellTemplate
property that can be used to retemplate the filter cell.
Bug fixes
- Fix auto-generate columns for TreeGrid #4399
- Emiting event when unpinning column #3833
- In Firefox when collapse all groups grid becomes empty #4304
- When transactions are enabled and update a filtered cell there is an error in console #4214
- In IE11 datePicker delete button is not in correct position when open a cell in edit mode #4116
- Refactoring filter cell navigation so that it is handled in the navigation service. Handling special scenarios for hierarchical grid in the hierarchical navigation service. #4267
- Grid: fix sorting in chrome #4397
- An error is returned when add a child for not committed row and summaries are enabled #4317
- Update child summaries correctly when CRUD operations are performed #4408
- Add igxQuickFilterTemplate directive #4377
- Resizing: move resize handle logic in a directive #4378
- No event emitted when column is unpinned #3799
- When update a cell in the grouped column the child summaries are not updated #4324
- Column Group border is misaligned with its children's in some cases #4387
- Expanding last row of HierarchicalGrid via keyboard(Alt + downArrow) leads to cell losing its focus. #4080
- fix(HierarchicalGrid): Moving onGridCreated to be emitted onInit #4370
- Virtualization of grid not working in tab #4329
- When you pin child column the whole group is not pinned #4278
7.2.2
Features
- Components' Display Type - All components now have their CSS display property explicitly set on the host element to ensure width, padding, and margins are applied when set directly on the host selectors.
- Themes
- Add support for gradients and images as values for component themes via the component theme functions.
Palettes
- added surface color to the palette. The surface color is used by cards, pickers, dialog windows, etc. as the default background.
Bug fixes
- fix(tabs): Fix for applying styles to tabs group #4371
- igxInput - add ability to toggle required dynamically #4361
- Select sort button only if default template is used #4372
- Public enumerations should not be constants #4364
- fix(hierarchicalGrid): Fix scrollbar not updated when data for children is loaded after initial load. #4334
- fix(date-picker): Fix for re-templating dropdown date-picker #4325
- Remove ngModel from datepicker #4333
- Scrollbar is not updated when load remote data #4209
- IgxGrid cell edit does not update values (onCellEdit) #4055
- Initial GroupBy performance is poor with many columns grouped #4309
- Components' display type #4316
- Including summary row cells in tab sequence for HierarchicalGrid navigation. #4293
- Surface color #4109
headerGroupClasses
is marked as hidden #4276
- Update AutoScrollStrategy to reposition elements outside NgZone #4250
- Optimizing post group pipe for 4309 - 7.2.x #4310
- IgxSelect does not close on Shift+Tab #4164
- clone method should have inheritdoc in all position strategies #4265
- Dialog does not emits close event the second time that is opened and closed #4222
- IgxLabelComponent is hidden #4237
- refactor(button-group): Fix the double borders between the buttons #4092
- Allow gradient/image values as backgrounds in component themes #4218
- Time Picker enhancements #4348
7.2.1
igxGrid
- Breaking Change The
groupsRecords
property now only returns the visible tree and does not include groups that are children of collapsed parents.
- Feature Column Hiding and Column Pinning components now expose a
disableFilter
property which allows hiding the filter columns input from the UI.
Improvements
- igxSelect - select-positioning-strategy code cleanup #4019
Bug fixes
- Tooltip remains opened after clicking its target #4127
- Can not move a column to left if the previous column is column group #4114
- TextHighlight Directive makes the matching spans bold #4129
- IgxDropDownItem still uses deprecated accessors #4167
- Double click in editMode reverts the cell's value #3985
- Navigation with Ctrl+arrow keys does not work in child grids #4120
- In IE11 and Edge when scroll page the excel filter dialog is not moved #4112
- IgxCalendar overlay, rendered from cell in edit mode, goes outside the grid when scrolling #4205
- When using keyboard navigation the child grid does not scroll to next row when next child is empty. #4153
- selectedIndex doesn't switch tab. #4245
- When the last column is hidden button RIGHT for the last visible column should be disabled #4230
- When excel-style-filtering is enabled and press Shift+tab on first cell the scroll should not be moved #4219
- Can not navigate with tab in filtering row if grid has no horizontal scroll #4111
- ExcelFilterStyle , what is the name of the onClick methods for the apply and cancel button ? onFilteringDone doesnt work here #4248
- When you focus an element from the Excel-Style Filtering List in Chrome a blue boarder appears #4269
- Need ability to remove a column filter that was previously set in the grid #4305
- Keyboard navigation inside summaries for hierarchical grid is not working with Ctrl + arrow keys #4176
- ReadMe links are broken on 7.2.0. release note #4251
- Error when scrolling grid with mouse wheel after closing a dialog window in the page #4232
- Circular progress bar throws error on IE11 #3787
- Issue with export excel/csv from grid #3763
- Setting grid data property manually after initial rendering without binding it to the input is not detected. #4242
- When child grids does not have set height and expand a row in child grid scrollbars are not updated and there is empty space on the grid #4239
- [ng add]: Enabling polyfills step doesn't update properly polyfill.ts generated by Angular CLI v7.3.x. #3967
- When change sorting from the excel filter it is not applied for the grouped column #4119
- When grid is filtered and update a cell summaries are not updated #4211
- [igx-date-picker] igxCalendarHeader and igxCalendarSubheader don't work #4223
- [igx-date-picker] unnecessary suffix "日" to the date part of the calendar. #4224
- igxMonthPicker - arrowdown and arrow up not working correctly inside months view #4190
- In Edge resizing indicators are offset incorrectly #3908
- igx-column-group does not fire onColumnVisibilityChanged #4194
7.2.0
igxCalendar
igxCalendar
has been refactored to provide the ability to instantiate each view as a separate component.
- Feature advanced keyboard navigation support has been added. Read up more information in the ReadMe
New component IgxMonthPicker
:
- Provides the ability to pick a specific month. Read up more information in the ReadMe
New component IgxHierarchicalGrid
:
- Provides the ability to represent and manipulate hierarchical data in which each level has a different schema. Each level is represented by a component derived from igx-grid and supports most of its functionality. Read up more information about the IgxHierarchicalGrid in the official documentation or the ReadMe
New component The igxSelect
provides an input with dropdown list allowing selection of a single item.
<igx-select #select1 [placeholder]="'Pick One'">
<label igxLabel>Sample Label</label>
<igx-select-item *ngFor="let item of items" [value]="item.field">
{{ item.field }}
</igx-select-item>
</igx-select>
documentation or the ReadMe
New directive igxAutocomplete
- new directive that provides a way to enhance a text input by showing a panel of suggested options, provided by the developer. More information about the IgxAutocomplete is available in the official documentation or the ReadMe.
<input igxInput type="text" [igxAutocomplete]="townsPanel" />
<igx-drop-down #townsPanel>
<igx-drop-down-item *ngFor="let town of towns" [value]="town">
{{town}}
</igx-drop-down-item>
</igx-drop-down>
igxGrid
now has isLoading
input property. When enabled will show loading indicator, until the data is available. It can be best utilized for remote scenarios. Another input property loadingGridTemplate
allows customizing the loading indicator.
<igx-grid [isLoading]="true" ...>
</igx-grid>
Group By
- The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related group row and when it points down clicking on it would expand the group row.
- The collapse/expand all icons have also been updated to reflect the new group row icons better.
- Group rows now can be expanded/collapsed using Alt + Arrow Up/Down to reflect the new icons.
filterMode
input added, which determines the filtering ui of the grid. The default value is quickFilter
. Other possible value is excelStyle
, which mimics the filtering in Excel with added functionality for column moving, sorting, hiding and pinning.
IgxColumnComponent
now has disablePinning
property, which determines wether the column can be pinned from
the toolbar and whether the column pin will be available in the excel style filter menu. The disableHiding
input will be used to show/hide the column hiding functionality in the menu.
igxTreeGrid
- The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related tree grid level and when it points down clicking on it would expand the tree grid level.
- Expanding/collapsing tree levels can now be performed also by using Alt + Arrow Up/Down to reflect the new icons.
IgxColumnComponent
- Breaking Change the
gridID
property is now deprecated. Please, use column.grid.id
instead.
igxCombo
- Breaking Change
combo.value
is now only a getter.
- Feature added support for templating the default input group of the component. The
igx-combo
now allows for igx-prefix
, igx-suffix
,igx-hint
and [igxLabel]
components to be passed as ng-content
and they will be renderer accordingly on the combo's input. Example:
<igx-combo #myCombo [data]="myGenres">
...
<label igxLabel>Genres</label>
<igx-prefix><igx-icon>music_note</igx-icon></igx-prefix>
</igx-combo>
- Feature the default combo 'clear' and 'toggle' icons can now be templated. Two new directives are added (with selector
[igxComboClearIcon]
and [igxComboToggleIcon]
). Passing an ng-template
with one of the directives will overwrite the default conent of the respective icon. Functionality will remain unaffected. Expample:
<igx-combo #myCombo [data]="myGenres">
...
<ng-template igxComboToggleIcon let-collapsed>
<igx-icon>{{ collapsed ? 'remove_circle' : 'remove_circle_outline'}}</igx-icon>
</ng-template>
</igx-combo>
igxDropDown
IgxDropDownItemBase
and it's descendants (of which IgxDropDownItem
) have had their isSelected
and isFocused
properties deprecated. Instead, use selected
and focused
properties.
- Added an
@Input
for the index
property (such as the one coming from ngFor) of the IgxDropDownItem
component. This deprecates the automatic index calculation. <igx-drop-down>
<igx-drop-down-item *ngFor="let item of items; let i = index" [index]="i">
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
- Feature
IgxDropDownGroupComponent
has been added. It allows for easier grouping of multi-level data, without the need of flattening it. The igx-drop-down-item-group
tag accepts igx-drop-down-item
s and displays them in the appropriate grouped fashion. <igx-drop-down>
<igx-drop-down-item-group *ngFor="let country of contries" [label]="country.name">
<igx-drop-down-item *ngFor="let city of country.cities" [value]='city.refNo'>
{{ city.name }}
</igx-drop-down-item>
</igx-drop-down-item-group>
</igx-drop-down>
Theme Elevations & Shadows
- Components with shadows, set by an elevation level or otherwise, are now fully configurable by the user via schema and/or theme properties. User can also provide a custom elevations set to component themes that support them.
- Breaking Change - The
$search-shadow-color
and $search-disabled-shadow-color
properties on the igx-input-group-theme
have been replaced with $search-resting-shadow
and $search-disabled-shadow
respectively. Use ng update
to migrate automatically.
IgxTreeGridComponent
- We can now search in the treegrid's data by using the
findNext
and the findPrev
methods and we can clear the search results with the clearSearch
method.
IgxTextHighlightDirective
IgxTextHighlightDirective.page
input property is deprecated. rowIndex
, columnIndex
and page
properties of the IActiveHighlightInfo
interface are also deprecated. Instead, row
and column
optional properties are added.
igxDragDrop
dragGhostHost
input property added. Sets the element to which the dragged element will be appended. If not provided, the dragged element is appended to the body.
Column Hiding UI
- Behavioral Change - The UI now hides the columns whose
disableHiding
property is set to true instead of simply disabling them.
igxButton
- New Button Style - Include outlined button style to support the latest material spec.
igxOverlay
:
igxOverlay.attach()
method added. Use this method to obtain an unique Id of the created overlay where the provided component will be shown. Then call igxOverlay.show(id, settings?)
method to show the component in overlay. The new attach
method has two overloads:
attach(element: ElementRef, settings?: OverlaySettings): string
- This overload will create overlay where provided element
will be shown.
attach(component: Type<any>, settings?: OverlaySettings, moduleRef?: NgModuleRef<any>): string
- Creates a ComponentRef
from the provided component
class to show in an overlay. If moduleRef
is provided the service will use the module's ComponentFactoryResolver
and Injector
when creating the ComponentRef
instead of the root ones.
igxOverlay.show(component, settings)
is deprecated. Use igxOverlay.attach()
method to obtain an Id, and then call igxOverlay.show(id, settings)
method to show a component in the overlay.
IPositionStrategy
exposes new method clone
that clones the strategy instance with its settings.
igx-date-picker
Ignite UI for Angular now allows you to change the shape of components by changing their border-radius.
Here is the list of all components that have roundness functionality:
- igx-badge
- igx-buttongroup
- igx-calendar
- igx-card
- igx-carousel
- igx-chip
- igx-dialog
- igx-drop-down
- igx-expansion-panel
- igx-input-group
- igx-list
- igx-navdrawer
- igx-snackbar
- igx-toast
igxTooltip
Breaking Change
- The
$button-roundness
property on the igx-button-theme
have been replaced for each button type with: $flat-border-radius
,$raised-border-radius
,$outline-border-radius
,$fab-border-radius
, $icon-border-radius
.
- The
$roundness
property on the igx-chip-theme
have been replaced with $border-radius
.
- The
$roundness
property on the iigx-tooltip-theme
have been replaced with $border-radius
.
Bug Fixes
- All initially pinned columns get unpinned if the grid's width is set as a percentage of its parent #3774
- Expanding a group row while at the bottom of the grid throws error #4179
- Grouping expand/collapse all button is not aligned with the row selector checkbox. #4178
- IgxToggleAction logs deprecated message in the console #4126
- IgxCombo - Calling selectItems([]) incorrectly clears the combo selection #4106
- IgxCombo - Clearing item filter sometimes empties drop down list #4000
- IgxCombo - Keyboard navigation ArrowDown stutters on chunk load #3999
- Row editing overlay banner not shown when enter row editing #4117
- IgxToggle open method always tries to get id even when it has one #3971
- Last (right-aligned) column is cut off when no widths are set for the columns #3396
- The selection in the last grid column does not span in the whole cell. #1115
- Last column header is a bit wider than the cells #1230
7.1.11
Improvements
- Row and Cell editing Docs improvements #4055
7.1.10
Features
- Column Hiding and Column Pinning components now expose a
disableFilter
property which allows hiding the filter columns input from the UI.
Bug Fixes
- Tooltip remains opened after clicking its target #4127
- TextHighlight Directive makes the matching spans bold #4129
- igx-grid:
pinned
property doesn't work when width
property is set together. #4125
- Double click in editMode reverts the cell's value #3985
- Issue with export excel/csv from grid #3763
- Error when scrolling grid with mouse wheel after closing a dialog window in the page #4232
- Circular progress bar throws error on IE11 #3787
- Setting grid data property manually after initial rendering without binding it to the input is not detected. #4242
headerGroupClasses
is marked as hidden #4276
- When you pin child column the whole group is not pinned #4278
- igx-column-group does not fire onColumnVisibilityChanged #4194
- When grid is filtered and update a cell summaries are not updated #4211
7.1.9
Bug Fixes
- igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
- Grid doesn't reflect the applied formatter immediately #3819
- Cannot set chip as selected through API if selectable is false #2383
- IgxCombo - Keyboard navigation in combo with remote data is incorrect #4049
- Setting groupingExpressions run-time has different result than using the UI/methods #3952
- Error on app-shell build in the icon module #4065
- Grid/TreeGrid toolbar dropdowns reopen when trying to close it every other time #4045
- When grid and columns have width in IE the columns are visible outside the grid #3716
- IgxGridToolbarComponent is hidden from the API docs #3974
- igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949
- IgxToggleAction logs deprecated message in the console #4126
7.1.8
Bug Fixes
- Required date picker bound to displayData is shown invalid initially. #3641
- If the columns don't fit the treeGrid viewport, horizontal scrollbar in TreeGrid is gone/disappears #3808
- igxGrid setting autogenerate and groupingExpressions inputs results in errors #3951
7.1.7
Bug fixes
- refactor(card): apply the content color to any text element #3878
- style(linear-bar): Fix text alignment #3862
7.1.6
Bug Fixes
- Calling open() on an already opened IgxDropDown replays the opening animation #3810
7.1.5
Features
7.1.4
Features
Column Hiding UI
- Behavioral Change - The UI now hides the columns whose
disableHiding
property is set to true instead of simply disabling them.
7.1.3
Bug Fixes
- When search and hide and then show a column the cell values are not correct (3631)
- When press Ctrl+Arrow down key on a summary cell it should stay active (3651)
- When summary row is not fully visible and press Tab the last summary cell is not activated (3652)
- Choosing from a drop down inside a form in a drop down closes the outer drop down (3673)
- Banner - Calling close method on collapsed panel throws error (3669)
- Typedoc API task generates non-public exports (2858)
- column.pin and column.unpin API descriptions need improvement (3660)
- disabledDates for the calendar and date picker should be an @Input() (3625)
- There is no way to determinate if a list item was panned in the click event (3629)
- When search and hide and then show a column the cell values are not correct (3631)
7.1.2
Features
Bug Fixes
- When transactions are enabled and delete a row page is changed to first page (3425)
- Row selectors header is not updated when commit transactions (3424)
- When a column is sorted and change value in a cell after commit and press enter on selected cell the focus is not in the input (2801)
- Closing the filter UI cuts the grid on the left (3451)
- GroupedRecords class should be hidden for doc generation. (3483)
- Badly formatted table in the JP documentation (3484)
- Not setting width in percentage on one or more columns results in columns going out of view (1245)
- Feature Request : locale property on a grid level (3455)
- Excel cannot open the exported data (3332)
- API DOC header links on header nav in JP leads to EN product page (3516)
- IgxGridHeaderGroupComponent should have preset min width (3071)
- Adding a custom svg to snackbar (3328)
- Feature request: Using text field input for date and time picker (2337)
- Summaries Keyboard navigation issues (3407)
- IgxRipple - animate() function not supported in Safari (3506)
- Faulty link in Typedoc (3531)
- [IE11] igx-grid - Filtering is cleared when clicking filtering chip if resourceString.igx_grid_filter_row_placeholder is set to Japanese character. (3504)
- Setting required IgxInput's value not via typing does not clear the invalid style. (3550)
- Add bodyTemplate as @Input() for igx-column (3562)
- Horizontal scrollbar is not shown when column's width is set to a percentage value. (3513)
- When select a date filter the date is not previewed in the input (3362)
- Missing locale errors on a browser with non-en language (3569)
- igx-action-icon is not vertically aligned in IgxNavbar (3584)
- [IE11] igx-grid filtering condition is reverted when typing Japanese character in the filtering textbox. (3577)
- TreeGrid has empty space when Summaries are enabled and expand/collapse (3409)
- Filtering row: no chip is created while typing Japanese characters on Edge (3599)
- PowerShell script should be added in order to apply some rules for deployment of the API DOCS (sassdoc, typedoc) (3618)
- igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group. (3047)
- Cells' content is shown twice when entering edit mode after searching. (3637)
- ng add improvements (3528)
7.1.1
Bug Fixes
- onSortingDone is not fired when sorting indicator of a header in the group by area is clicked (#3257)
- igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group (#3047)
- Preventing wrap-around for scrollNext and scrollPrev(#3365)
- IgxTreeGrid does not respect its parent container height (#3467)
- Include grid's unpinnedWidth and totalWidth in cell width calculation (#3465)
Other
- update typedoc-plugin-localization version to 1.4.1 (#3440)
7.1.0
Features
- New component
IgxBannerComponent
:
- Allows the developer to easily display a highly templateable message that requires minimal user interaction (1-2 actions) to be dismissed. Read up more information about the IgxBannerComponent in the official documentation or the ReadMe
igxGrid
- Added a new
igxToolbarCustomContent
directive which can be used to mark an ng-template
which provides a custom content for the IgxGrid's toolbar (#2983)
- Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled.
clearSummaryCache()
and recalculateSummaries()
methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed.
locale
property added. Default value is en
. All child components will use it as locale.
- Breaking change
IgxSummaryOperand.operate()
method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of IgxSummaryResult
with proper length.
IgxIconModule
:
- Breaking change
igxIconService
is now provided in root (providedIn: 'root') and IgxIconModule.forRoot()
method is deprecated.
- Breaking change
glyphName
property of the igxIconComponent
is deprecated.
IgxColumnComponent
:
- Breaking change the
filters
input now expects IgxFilteringOperand
instance, instead of class ref. This way custom IgxFilteringOperands
no longer need to be singleton, with defined instance
method.
IgxMask
:
placeholder
input property is added to allow developers to specify the placeholder attribute of the host input element that the igxMask
is applied on;
displayValuePipe
input property is provided that allows developers to additionally transform the value on blur;
focusedValuePipe
input property is provided that allows developers to additionally transform the value on focus;
IgxTreeGrid
:
- Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.
- You can now export the tree grid both to CSV and Excel.
- The hierarchy and the records' expanded states would be reflected in the exported Excel worksheet.
- Summaries feature is now supported in the tree grid. Summary results are calculated and displayed for the root level and each child level by default.
IgxOverlayService
:
ElasticPositioningStrategy
added. This strategy positions the element as in Connected positioning strategy and resize the element to fit in the view port in case the element is partially getting out of view.
7.0.5
Bug Fixes
- igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group. (#3047)
- igx-slider max-value defaults to min-value (#3418)
- Inconsistency in scrollNext and scrollPrev (#3365)
- The header link in the api docs page should be to the product page (#3423)
- Error thrown when edit primaryKey cell in Tree Grid (#3329)
- IgxGridHeaderGroupComponent should have preset min width (#3071)
- Pressing ESC on a cell in an editable column throws an error (#3429)
- Cell foreground is white on hover with the default theme (#3384)
- [IE] Grid toolbar's buttons and title are misaligned (#3371)
- Dialog window does not hold the focus when opened (#3199)
- refactor(themes): don't include contrast colors in the palettes (#3166)
Other
- update typedoc-plugin-localization version to 1.4.1 (#3440)
- Move all keyboard navigation tests in a separate file (#2975)
7.0.4
Bug fixes
- Fix(igx-grid): revert row editing styles (#2672)
- Revert "fix(grid): set min width to header groups programmatically" status: verified version: 7.0.x
(#3357)
7.0.3
Bug fixes
- ng add igniteui-angular adds igniteui-cli package to both dependencies and devDependencies (#3254)
- Group column header is not styled correctly when moving that column (#3072)
- igx-grid: Filter row remains after disabling filtering feature (#3255)
- [igxGrid] Keyboard navigation between cells and filtering row with MCH (#3179)
- Argument $color of red($color) must be a color (#3190)
- Shell strings localization (#3237)
- Tabbing out of the combo search input not possible (#3200)
- Localization (i18n) not available for inputs/buttons on the grid filtering dialog (#2517)
- When in the tree grid are pinned columns and scroll horizontal the cells text is over the pinned text #3163
- Request for update of shell strings in Japanese (#3163)
- Refactor(themes): remove get-function calls (#3327)
- Fix(grid): recalculate grid body size when changing allowFiltering dynamically (#3321)
- Fix - Combo - Hide Search input when !filterable && !allowCustomValues - 7.0.x (#3314)
- Fixing column chooser column updating - 7.0.x (#3235)
- Disable combo checkbox animations on scroll (#3303)
- Added validation if last column collides with grid's scroll. (#3028) (#3100)
- Use value instead of ngModel to update editValue for checkbox and calendar in igxCell (#3225)
- Add @inheritdoc, create ScrollStrategy abstract class and fix method signatures 7.0.x (#3222)
- When scroll with the mouse wheel the value in datePicker editor for edited cell is empty (#2958)
- igxToolbar should have the option to add custom template (#2983)
- fix(grid): mark grid for check inside NgZone when resizing (#2792) (#3277)
- IgxGridHeaderGroupComponent should have preset min width (#3071)
- Tree grid selection (#3334)
7.0.2
Features
ng add igniteui-angular
support :tada:
- You can now add Ignite UI for Angular to existing Angular CLI projects - simply run
ng add igniteui-angular
in your project.
This will install the package and all needed dependencies, add Ignite UI CLI so you can even quickly add components.
- New component
IgxBannerComponent
:
- Allows the developer to easily display a highly templateable message that requires minimal user interaction (1-2 actions) to be dismissed. Read up more information about the IgxBannerComponent in the official documentation or the ReadMe
igxNavbar
:
- Added a new
igx-action-icon
directive that can be used to provide a custom template to be used instead of the default action icon on the left-most part of the navbar.
(If igx-action-icon
is provided, the default action icon will not be used.)
Bug fixes
igxGrid
- Filter row does not close when click button cancel, if the entered text is deleted (#3198)
- Prevent a potential memory leak (#3033)
- Filtering: Open dropdown on Alt+down, fixes input being populated on keyboard action (#3202)
- Row Selection: selected checkboxes are flickering on vertical scrolling (#2523)
- Row editing overlay animation should be bottom - top, when overlay is placed over the row (#3184)
7.0.1
Bug fixes
- Removed the
GridHammerConfig
provider which broke touch events for other components. (Fixed #3185, Reopens #2538)
7.0.0
- Updated package dependencies to Angular 7 (#3000)
- Themes: Add dark schemas and mixins (PR #3025)
6.2.12
Bug fixes
- igx-grid:
pinned
property doesn't work when width
property is set together. #4125
- When you pin child column the whole group is not pinned #4278
6.2.11
Bug Fixes
- igx-grid: Incorrect height calculation when setting height in percent and binding empty data. #3950
- Cannot set chip as selected through API if selectable is false #2383
- Setting groupingExpressions run-time has different result than using the UI/methods #3952
- igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949
6.2.10
Bug Fixes
- Cells position is changed when scroll vertical #3094
- igxGrid setting autogenerate and groupingExpressions inputs results in errors #3951
6.2.9
Features
igxGrid
Group By
- The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related group row and when it points down clicking on it would expand the group row.
- The collapse/expand all icons have also been updated to reflect the new group row icons better.
- Group rows now can be expanded/collapsed using Alt + Arrow Up/Down to reflect the new icons.
igxTreeGrid
- The collapse/expand icons have new orientantion to display the action that will be performed when clicked. When an icon points up clicking on it would result in collapsing the related tree grid level and when it points down clicking on it would expand the tree grid level.
- Expanding/collapsing tree levels can now be performed also by using Alt + Arrow Up/Down to reflect the new icons.
Bug Fixes
- Add additional ways of expanding/collapsing in Tree Grid/Group By to reflect new icons #3841
6.2.8
Bug Fixes
- Tree Grid collapse icon is updated to material standards #3780
- Change collapse/expand all icon on GroupBy #3298
6.2.7
Bug Fixes
- igx-grid editing: Japanese inputs are not committed on enter or press key in edit mode #2525
6.2.6
Bug Fixes/Other
- Add GA to API docs (3596)
- Modify gulp api docs tasks in order to follow the build steps (3681)
6.2.5
Bug Fixes
- Setting required IgxInput's value not via typing does not clear the invalid style (3550)
- igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group (3047)
- igxGrid minimal body height when no total height is set or inferred (1693)
- Horizontal scrollbar is not shown when column's width is set to a percentage value (3513)
- Visible @hidden tag due to comment structure (3523)
- Faulty link in Typedoc (3531)
- Several warnings on app launch 6.2.0 RC1 and now 7.0.2 (2915)
- For_of directive doesn't scroll to next elements in some cases (3482)
- Not setting width in percentage on one or more columns results in columns going out of view (1245)
- Calendar test is failing because of wrong selector (3508)
- When transactions are enabled and delete a row page is changed to first page (3425)
- When a column is sorted and change value in a cell after commit and press enter on selected cell the focus is not in the input (2801)
- igxFor with scrollOrientation: horizontal - Almost all the items are not rendered when they don't have width property (3087)
- Pressing ESC on a cell in an editable column throws an error (3429)
6.2.4
Bug Fixes
- onSortingDone is not fired when sorting indicator of a header in the group by area is clicked (#3257)
- igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group (#3047)
- Preventing wrap-around for scrollNext and scrollPrev(#3365)
- IgxTreeGrid does not respect its parent container height (#3467)
- The header link in the api docs page should be to the product page (#3423)
- fix(dialog): dialog gets focus when is opened (#3276)
- IgxTreeGrid - Add row editing + transactions to tree grid (#2908)
- Regular highlight makes the highlighted text unreadable when the row is selected. (#1852)
- Use value instead of ngModel to update editValue for checkbox and calendar in igxCell (#3224)
- Disable combo checkbox animations on scroll (#3300)
- "Select/Unselect All" checkbox is checked after deleting all rows (#3068)
- Fixing column chooser column updating (#3234)
- Fix - Combo - Hide Search input when !filterable && !allowCustomValues (#3315)
- Add @inheritdoc (#2943)
- refactor(displayDensity): Code cleanup in display density base class #3280
- Calculating updated grid height when rebinding columns (#3285)
- Fix - Combo, Drop Down - Fix TAB key navigation (#3206)
- Added validation if last column collides with grid's scroll (#3142)
- When in the tree grid are pinned columns and scroll horizontal the cells text is over the pinned text (#3163)
- refactor(themes): don't include contrast colors in the palettes (#3166)
Code enhancements
- Fix the logic calculating test results (#3461)
- Update typedoc version and localize some shell strings (#3237)
- fix(toolbar): including custom content in the show toolbar check (#2983)
- docs(toolbar): adding more API docs (#2983)
Other
- update typedoc-plugin-localization version to 1.4.1 (#3440)
- Update contributing document with localization (#3313)
- docs(*): add 6.2.3 missing changes and bug fixes to changelog (#3251)
- Docs - Expansion Panel - Add comments and README(#3245)
- Move all keyboard navigation tests in a separate file (#2975)
6.2.3
igxGrid
resourceStrings
property added, which allows changing/localizing strings for component. If a new instance is set,
the changes will be applied to the particular instance of the component: this.grid.resourceStrings = {
igx_grid_filter: 'My filter',
igx_grid_filter_row_close: 'My close'
};
If only a value is updated, all component instances will be updated: this.grid.resourceStrings.igx_grid_filter = 'My filter';
igxTimePicker
:
resourceStrings
property added, which allows changing/localizing strings for component.
- Localization
- Added an util function
changei18n
that takes IResourceStrings
object as parameter. Its values will be used as resource strings for all components
in the application.
- Added an util function
getCurrentResourceStrings
that returns current resource strings for all components.
ISortingEpression
:
- The
ignoreCase
and strategy
properties are moved back to optional, and the DefaultSortingStrategy
is now injected by the IgxSorting
, instead of being mandatory to pass to expressions.
Bug fixes
igxGrid
- Filter row does not close when click button cancel, if the entered text is deleted (#3198)
- Prevent a potential memory leak (#3033)
- Filtering: Open dropdown on Alt+down, fixes input being populated on keyboard action (#3202)
- Row Selection: selected checkboxes are flickering on vertical scrolling (#2523)
- Row editing overlay animation should be bottom - top, when overlay is placed over the row (#3184)
6.2.2
igx-checkbox
:
- Added a new input property -
disableTransitions
. It allows disabling all CSS transitions on the igx-checkbox
component for performance optimization.Bug fixes
- Removed the
GridHammerConfig
provider which broke touch events for other components. (Fixed #3185, Reopens #2538)
6.2.1
Features
igxGrid
, igxChip
: Add display density DI token to igxGrid and igxChip (#2804)
igxGrid
- Quick filter auto close (#2979)
- Group By: Added title to chip in Group By area (#3035)
- Improve UX for boolean and date columns, (#3092)
igxCombo
:
- Added a new input property -
displayDensity
. It allows configuring the displayDensity
of the combo's value
and search
inputs. (PR #3007)
igxDropDown
- Added a new property
maxHeight
, defining the max height of the drop down. (#3001)
- Added migrations for Sass theme properties changes in 6.2.0 (#2994)
- Themes
- Introducing schemas for easier bootstrapping of component themes.
- Breaking change removed $variant from
igx-checkbox-theme
, igx-ripple-theme
, igx-switch-theme
, igx-input-group-theme
, igx-slider-theme
, and igx-tooltip-theme
. Use the $schema
prop, now available on all component themes to change the look for a specific theme. See the Theming documentation to learn more.
Bug fixes
igxGrid
- Filtering condition icon is not updated for boolean columns (#2936)
- Batch editing: Updating a cell with a value that evaluates to false does not mark it as dirty (#2940)
- Filtering input accepts value from calendar for unary conditions (#2937)
- When a number filter's value is deleted the grid is not refreshed (#2945)
- Improve keyboard navigation in filtering (#2951, #2941)
- Group By: Alt+ Arrow left/Right keys should not toggle the group row (#2950)
- Multi Column Header can be grouped (#2944)
- Group By: groupsRecords is not updated yet at the time of onGroupingDone event. (#2967)
- Paging: Blank space in rows area after vertical scrolling and navigating to next page (#2957)
- When date or boolean cell is in edit mode and press arrowUp or arrowDown key the page is scrolled (#2507)
- When deleting a row the Row Editing dialog should be closed (#2977)
- Group header with columns which width is defined as number throws an exception (#3020)
- Refactor header and filter cell components, Closes #2972, #2926, #2923, #2917, #2783, #3027, #2938
- Filter's UI dropdown is hidden under the bottom level of the grid (#2928)
- Cell is not editable on iOS (#2538)
IgxTreeGrid
- Cell selection wrong behavior when collapsing rows (#2935)
igxCombo
- Keyboard doesn't scroll virtualized items (#2999)
igxDatePicker
- Error emitting when value property is initialized with empty string. (#3021)
igxOverlay
- Drop-down flickers in IE and EDGE (#2867)
igxTabs
- Tabs don't not handle width change (#3030)
igxCalendar
- make all css class names unique (#2287)
- Fixed runtime errors when using the package in applications targeting es2015(es6) and newer (#3011)
6.2.0
Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. #2112
- Breaking change: Applications using Ignite UI for Angular now require the
igx-typography
class to be applied on wrapping element, like the body element for instance.
Display density can be specified by using the injection token DisplayDensityToken
and providing a value (comfortable, cosy or compact) on an application or a component level.
Setting display density on a component level:
@Component({
...
providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
})
igx-input-group
igx-drop-down
:
- Added a new boolean argument
cancel
to the onSelection
ISelectionEventArgs
. Its default value is false, in case it is set to true, the drop down selection is invalidated.
igxIcon
:
- Breaking change
glyphName
property is removed from IgxIconComponent
. For Material
icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome
icons should use the name
property now.
- Added support for custom SVG icons. Register the SVG icons with the
IgxIconService
and use IgxIconComponent
's name
and fontSet
properties to visualize the icon.
- Transaction Provider -
TransactionService
is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
For more detailed information, see the README.
igxTreeGrid
:
- New
IgxTreeGridComponent
added.
- The
igxTreeGrid
is used to display and manipulate hierarchical data with consistent schema, formatted as a table and provides a line of advanced features such as sorting, filtering, editing, column pinning, column moving, column hiding, paging and others.
- The
igxTreeGrid
provides two ways of defining the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.
- For more details on using the
igxTreeGrid
, take a look at the official documentation.
igxGrid
:
Breaking change onGroupingDone
- The array of ISortingExpression
can now be accessed through the expressions
event property. Two new properties have been added to the event arguments - groupedColumns
and ungroupedColumns
. They provide references to arrays of IgxColumnComponent
that hold the columns which have changed their state because of the last grouping/ungrouping operation.
Breaking change onEditDone
event is renamed to onCellEdit
and new cell editing events are introduced: onCellEditEnter
and onCellEditCancel
. When row editing is enabled, the corresponding events are emitted by the grid - onRowEditEnter
, onRowEdit
, onRowEditCancel
. All these events have arguments that are using the IGridEditEventArgs
interface.
Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.
<igx-grid [data]="data" [rowEditable]="true">
<igx-column field="ProductName"></igx-column>
<igx-column field="ReleaseDate"></igx-column>
</igx-grid>
Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.
@Component({
providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
selector: "app-grid-with-transactions",
template: "<ng-content></ng-content>"
})
export class GridWithTransactionsComponent { }
- A new boolean
hideGroupedColumns
input controls whether the grouped columns should be hidden as well (defaults to false).
- Breaking change
cellClasses
input on IgxColumnComponent
now accepts an object literal to allow conditional cell styling.
- Exposing a mechanism for cells to grow according to their content.
sortStrategy
input exposed to provide custom sort strategy for the IgxColumnComponent
. The custom strategy should implement the ISortingStrategy
interface, or can extend the base SortingStrategy
class and override all or some of its public/protected members.
- New quick filtering functionality is implemented. Filtering icon is removed from column header and a filtering row is introduced in the grid's header.
igxFor
- Added support for variable heights.
igx-datePicker
selector is deprecated. Use igx-date-picker
selector instead.
igxOverlay
:
OverlaySettings
now also accepts an optional outlet
to specify the container where the overlay should be attached.
- when
show
and hide
methods are called onAnimation
event fires. In the arguments of this event there is a reference to the animationPlayer
, animationType
(either open
or close
) and to the overlay id.
- if you call
show
/hide
methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.
igxToggleAction
new outlet
input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet
.
IgxOverlayOutlet
directive introduced to mark an element as an igxOverlay
outlet container. ReadMe
igxButtonGroup
- Added the ability to define buttons directly in the template
igx-time-picker
:
igxTimePickerTemplate
- new directive which should be applied on the child <ng-template>
element when IgxTimePickerComponent
's input group is retemplated.
igx-datePicker
:
igxDatePickerTemplate
- new directive which should be applied on the child <ng-template>
element when IgxDatePickerComponent
's input group is retemplated.
- Introduced
disabledDates
. This property is exposed from the igx-calendar
component.
- Introduced
specialDates
. This property is exposed from the igx-calendar
component.
- Introduced
deselectDate
method added that deselects the calendar date.
IgxTextHighlightDirective
: The highlight
method now has a new optional parameter called exactMatch
(defaults to false).
- If its value is false, all occurrences of the search text will be highlighted in the group's value.
- If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).
IgxGrid
: The findNext
and findPrev
methods now have a new optional parameter called exactMatch
(defaults to false).
- If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
- If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).
IgxChip
- Introduced event argument types to all
EventEmitter
@Output
s.
- Breaking change
onSelection
's EventEmitter interface property nextStatus
is renamed to selected
.
- Breaking change Move the location of where the chip
suffix
is positioned. Now it is between the content and the remove button
making the button last element if visible by default.
- Breaking change Remove the chip
connector
rendered when using the igxConnector
directive that is also removed.
- Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
- Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default
null
.
- Added
data
input for storing any data related to the chip itself.
- Added
select icon
with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
- Added
selectIcon
input to set custom template for the select icon
.
- Update chip styling to match Material Design guidelines.
- Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
- Rework of the
remove button
rendered and now has the ability to customize its icon while retaining the chip Material Design.
- Added
removeIcon
input so a custom template cane be set for the remove button icon.
IgxChipArea
- Introduced event argument types to all
EventEmitter
@Output
s.
- Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default
null
.
IgxCombo
- Added the following directives for
TemplateRef
assignment for combo templates (item, footer, etc.):
- Added
IgxComboItemDirective
. Use [igxComboItem]
in markup to assing a TemplateRef to combo.itemTemplate
.
- Added
IgxComboHeaderDirective
. Use [igxComboHeader]
in markup to assing a TemplateRef to combo.headerTemplate
.
- Added
IgxComboFooterDirective
. Use [igxComboFooter]
in markup to assing a TemplateRef to combo.footerTemplate
.
- Added
IgxComboEmptyDirective
. Use [igxComboEmpty]
in markup to assing a TemplateRef to combo.emptyTemplate
.
- Added
IgxComboAddItemirective
. Use [igxComboAddItem]
in markup to assing a TemplateRef to combo.addItemTemplate
.
- Added
IgxComboHeaderItemDirective
. Use [igxComboHeaderItem]
in markup to assing a TemplateRef to combo.headerItemTemplate
.
- Breaking change Assigning templates with the following template ref variables is now deprecated in favor of the new directives:
`#itemTemplate`, `#headerTemplate`, `#footerTemplate`, `#emptyTemplate`, `#addItemTemplate`, `#headerItemTemplate`.
- Breaking change
height
property is removed. In the future IgxInputGroup
will expose an option that allows custom sizing and then IgxCombo
will use the same functionality for proper styling and better consistency.
IgxDropDown
- Breaking change
allowItemsFocus
default value is changed to false
.
- Added
value
input to IgxDropDownItemComponent
definition. The property allows data to be bound to a drop-down item so it can more easily be retrieved (e.g. on selection)
igx-calendar
:
- Introduced
disabledDates
property which allows a user to disable dates based on various rules: before or after a date, weekends, workdays, specific dates and ranges. The disabled dates cannot be selected and have a distinguishable style.
- Introduced
specialDates
property which allows a user to mark dates as special. They can be set by using various rules. Their style is distinguishable.
- Introduced
deselectDate
method added that deselects date(s) (based on the selection type)
igxExpansionPanel
:
- component added.
igxExpansionPanel
provides a way to display more information after expanding an item, respectively show less after collapsing it. For more detailed information see the official documentation.
IgxList
:
- the control now supports ng-templates which are shown "under" a list item when it is left or right panned. The templates are distinguished using the
igxListItemLeftPanning
and igxListItemRightPanning
directives set on the templates.
- the IgxList's
onLeftPan
and onRightPan
events now have an argument of type IListItemPanningEventArgs
(instead of IgxListItemComponent
). The event argument has the following fields:
- item of type
IgxListItemComponent
- direction of type
IgxListPanState
- keepItem of type
boolean
igxTooltip
and igxTooltipTarget
directives:
- Added
IgxTooltipDirective
.
- An element that uses the
igxTooltip
directive is used as a tooltip for a specific target (anchor).
- Extends
IgxToggleDirective
.
- Exported with the name tooltip.
- Added
IgxTooltipTargetDirective
.
- An element that uses the
igxTooltipTarget
directive is used as a target (anchor) for a specific tooltip.
- Extends
IgxToggleActionDirective
.
- Exported with the name tooltipTarget.
- Both new directives are used in combination to set a tooltip to an element. For more detailed information, see the README.
igxToggle
:
- Introduced reposition method which allows a user to force toggle to reposition according its position strategy.
IgxDrag
and IgxDrop
directives available.
IgxDrag
allows any kind of element to be moved/dragged around the page without changing its position in the DOM. Supports Desktop/Mixed/Touch environments.
IgxDrop
allows any element to act as a drop area where any igxDrag
element can be dragged into and dropped. Includes default logic that moves the dropped element from its original position to a child of the igxDrop
element.
- Combined they provide a way to move elements around the page by dragging them. For more detail see the README.
IgxGrid
keyboard navigation
When you focus a specific cell and press one of the following key combinations, the described behaviour is now performed:
Ctrl + Arrow Key Up
- navigates to the first cell in the current column;
Ctrl + Arrow Down
- navigates to the last cell in the current column;
Home
- provide the same behavior as Ctrl + Arrow Left - navigates to the first cell from the current row;
End
- provide the same behavior as Ctrl + Arrow Right - navigates to the last cell from the current row;
Ctrl + Home
- navigates to the first cell in the grid;
Ctrl + End
- navigates to the last cell in the grid;
Tab
- sequentially move the focus over the next cell on the row and if the last cell is reached move to next row. If next row is group row the whole row is focused, if it is data row, move focus over the first cell;
Shift + Tab
- sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row;
Space
over Cell - if the row is selectable, on keydown space triggers row selection
Arrow Left
over GroupRow - collapse the group row content if the row is not already collapsed;
Arrow Right
over GroupRow - expand the group row content if the row is not already expanded;
- on mouse
wheel
the focused element is blurred;
- Breaking change
space
handler for the group row has been removed; so Space
does not toggle the group row;
- Breaking change cell selection is preserved when the focus is moved to group row.
- Introduced
onFocusChange
event. The event is cancelable and output argument from type IFocusChangeEventArgs
;
- For more detailed information see the official keyboard navigation specification.
6.1.9
General
sortStrategy
input exposed to provide custom sort strategy for the IgxColumnComponent
. The custom strategy should implement the ISortingStrategy
interface, or can extend the base DefaultSortingStrategy
class and override all or some of its public/protected members.
- The previously optional
ignoreCase
and strategy
of the ISortingExpression
interface are no longer optional. In order to use our default sorting strategy in expressions built programmatically, you need to pass DefaultSortingStrategy.instance()
or any implementation of the ISortingStrategy
interface.
groupingComparer
input exposed to provide custom grouping compare function for the IgxColumnComponent
. The function receives two values and should return 0
if they are to considered members of the same group.
6.1.8
Bug fixes
- Fix sorting and groupby expression not syncing when there are already sorted columns. #2786
- GroupBy Chip sorting direction indicator is not changed if sorting direction is changed #2765
- Failing tests caused by inconsistent behavior when sorting a column with equal values #2767
- IgxGridComponent.groupingExpressions is of type any #2758
6.1.7
Bug Fixes
- IgxSelectionAPIService allows to add items with id which is undefined #2581
- FilteredSortedData collection holds the original data after first filtering operation is done #2611
- Calendar improvement of "selected" getter #2687
- Improve igxCalendar performance #2675
- Add Azure Pipelines CI and PR builds #2605
- The igxDatePicker changes the time portion of a provided date #2561
- IgxChip remove icon has wrong color #2573
- Chip has intrinsic margin #2662
- IgxChip remove icon has wrong color #2573
- ChipsArea's OnSelection output is not emitted on initialization #2640
6.1.6
Bug Fixes
- IgxChip raises onSelection before onRemove #2612
- Summaries are shown on horizontal scrolling when Row Selectors are enabled #2522
- Bug - IgxCombo - Combo does not bind properly with [(ngModel)] and simple data (e.g. string[]) #2620
- Missing backtick in comment #2537
- IgxSelectionAPIService allows to add items with id which is undefined #2581
- Circular bar text is clipped #2370
- Update all angular async Calendar tests to await async #2582
- InvalidPipeArgument: 'inable to convert "" into a date for pipe 'DatePipe' #2520
- All cells in the row enter in edit mode if igx-columns are recreated. #2516
6.1.5
- General
IgxChip
- Introduced event argument types to all
EventEmitter
@Output
s.
- A chip can now be selected with the API with the new
selected
input. The selected
input overrides the selectable
input value.
- Breaking change
onSelection
's EventEmitter interface property nextStatus
is renamed to selected
.
IgxChipArea
- Introduced event argument types to all
EventEmitter
@Output
s.
igxFor
- Adding inertia scrolling for touch devices. This also affects the following components that virtualize their content via the igxFor -
igxGrid
, igxCombo
.
igxGrid
- Adding inertia scrolling for touch devices.
igxCombo
- Adding inertia scrolling for touch devices.
IgxCalendar
- deselectDate
method added that deselects date(s) (based on the selection type)
IgxDatePicker
- deselectDate
method added that deselects the calendar date.
Bug Fixes
- igx-tabs : When you move the tab key, the contents of other tabs are displayed. #2550
- Prevent default scroll behavior when using keyboard navigation. #2496
- Error is thrown on ng serve --prod #2540
- onSelection event is not fired when a cell in last visible row is row is selected and press arrow Down #2509
- Add deselect method to igxCalendar #2424
- Time starts from 03 minutes instead of 00 #2541
- Replace EventEmitter<any> with the respective interface for the event #2481
- Cannot scroll last item in view #2504
- Japanese character is redundantly inserted into textbox on filter dialog on Safari #2316
- Improve row selection performance #1258
- igxRipple - Mousedown event doesn't bubble up when igxRipple is attached to elements. #2473
- Add default formatting for numbers in igx-grid #1197
- An error is returned when update a filtered cell #2465
- Grid Keyboard navigation performance issue #1923
- Vertical scrolling performance is slower when grouping is applied. #2421
6.1.4
Bug Fixes
- Bottom of letters fall of in the label of igx-tabs-group #1978
- The search highlight and info are not updated correctly after editing a cell value of the grid #2388
- Cannot set chip as selected through API if selectable is false #2383
- Pressing 'Home/End' keys is not moving the focus to the first/last item #2332
- Cannot set igxChip as selected #2378
- Scrolling using touch is not working on Edge and Internet Explorer 11 #1639
- IgxCombo - Selection - Cannot override combo selection through the onSelectionChange event #2440
- igx-grid -
updateCell
method doesn't update cells that are not rendered. #2350
6.1.3
General
igxTabs
selectedIndex
property has an @Input
setter and can be set both in markup and in code behind.
igxDropDownItem
isSelected
has a public setter and is now an @Input
property that can be used for template binding.
igxGrid
- Breaking change
applyNumberCSSClass
and columnType
getters are removed.
isUnary
property added to IFilteringOperation
igxColumn
- The footerTemplate property is removed.
igxColumnGroup
- The footerTemplate property is removed.
- exposed
autosize()
method on IgxColumnComponent
. It allows the user to programatically change the size of a column according to it's largest visible cell.
- Initializing an
igxGrid
component without setting height, inside a container without height defined, now causes the grid to render 10 records from the data view or all of the records if there are fewer than 10 available.
igxCombo
- Breaking change igxCombo default
width
is set to 100%
- Breaking change
itemsMaxWidth
is renamed to itemsWidth
igxLinearBar
and igxCircularBar
- exposed
step
input which determines the update step of the progress indicator. By default it is one percent of the maximum value.
IgxCircularBar
text
input property exposed to set the text to be displayed inside the circular bar.
Bug fixes
- igx-grid - cannot auto-size columns by double-clicking in IE11 #2025
- Animation for removing item from list is very quick, must be more smoothly. #2306
- circular and linear bars - prevent progress exceeding, smooth update when operate with big nums, allow floating point nums, expose step input #2163
- Blank space on the right of igxGrid when there is a hidden column and grid width is 100% #2249
- Igx Combo throws errors when data is set to null or undefined #2300
- Top cell is not positioned aligned to the header, after keyboard navigation #1185
- In carousel when call method remove for selected slide it is still previewed #2182
- In grid paging paginate and page should check if the page is greater than the totalPages #2288
- Typos and inaccuracies in IgxSnackbar's readme. #2250
- The grid enables all the columns to be declared as pinned in the template #1612
- Combo - Keyboard Navigation - Add Item button fires on Keydown.Space #2266
- Reduce the use of MutationObservers in the IgxTextHighlightDirective #2251
- Improve row selection performance #1258
- Filter UI dialog redraws #2038
- Can't navigate from first row cell to selection checkbox with key combination #1937
- Incorrect position pinning of Navigation Drawer #2013
- Keyboard navigation not working correctly whith column moving and cell selection #2086
- Grid Layout is broken when you hide column #2121
- IgxDateFilteringOperand's operation "doesNotEqual" doesn't work if the "equals" operation is localized(modified). #2202
- aside in igx-nav-drawer surpasses height of igx-nav-drawer #1981
- The button for collapse/expand all in groupby is not working correctly #2200
- IgxDropDown Item cannot be set as selected. #2061
- IgxBooleanFilteringOperand doesn't work if the operation 'all' is localized(modified). #2067
- columnMove doesn't work if no data is loaded. #2158
- Combo's clear button should be just an icon #2099
- Default combo width should be 100% #2097
- The combo list disappears after disabling Filtering at runtime #2108
- igx-slider - slider comes to not work well after changing maxValue. #920
- Search match highlight not always scrolled into view #1886
- When groupby row is focused and spacebar is pressed the browser scrolls down, everywhere except Chrome, although it should only collapse the group #1947
- Grid data bind fails initially until window resize #1614
- Localization (i18n) for grid grouping area string #2046
- When delete all records in the last page pager should be changed #2014
- Filter icon in the header changes its position #2036
6.1.2
General
- Added
jsZip
as a Dependency.
Bug Fixes
- Grid Layout is broken when you change displayDensity runtime #2005
- Add empty grid template #2035
- Page Up/Page Down buttons don't scroll the grid #606
- Icon component is not properly exported #2072
- Adding density to chip doesn't make the density style to apply when it is dragged #1846
- Update jszip as dependency #2043
- No message is displayed when there is empty grid data without filtering enabled. #2001
- The only possible range of setting minValue to igxSlider is between [0..99] #2033
- Bootstrap & IgniteUI issues #1548
- Remove tabs from collection -> TabCollectionChange Output #1972
- 6.1.1 error on npm install #2023
- Remote binding combo doesn't store the selected fields when scrolled or collapsed #1944
- Exception is thrown when hovering a chip with a column header #1813
- IgxCombo - Remote Virtualization Keyboard Navigation #1987
6.1.1
Bug Fixes
- Exit edit mode when move column through grid API #1932
- IgxListItemComponent and the two template directives are missing from public_api.ts. #1939
- Add Item button disappears after adding same item twice successively. #1938
- onTabItemDeselected is called for every not selected tab item #1952
- Exit edit mode when pin/unpin column through grid API #1933
- Selected combo item doesn't have the proper focused styles #1948
- Time-picker does not open on button-press. #1949
- Custom cell not rendering with grid searching functionality #1931
- Regular highlight makes the highlighted text unreadable when the row is selected. #1852
- DatePicker focus is wrong on select date value #1965
- add sass docs, grid document updates and input-group theme-related fixes #1993
- DatePicker focus handler and AoT build #1994
- Change displayDensity runtime #1974
- Change IgxGrid display density runtime #1998
- Error is thrown when using igx-grid theme without $content-background #1996
- Update npm deploy token #2002
6.1.0
igxOverlay
service added. igxOverlayService allows you to show any component above all elements in page. For more detailed information see the official documentation
- Added igxRadioGroup directive. It allows better control over its child
igxRadio
components and support template-driven and reactive forms.
- Added
column moving
feature to igxGrid
, enabled on a per-column level. Column moving allows you to reorder the igxGrid
columns via standard drag/drop mouse or touch gestures.
For more detailed information see the official documentation.
igx-tab-bar
selector removed from IgxBottomNavComponent
.
igxGrid
filtering operands
igxGrid
- Breaking change
filter_multiple
method is removed. filter
method and filteringExpressionsTree
property could be used instead.
- Breaking change
filter
method has new signature. It now accepts the following parameters:
name
- the name of the column to be filtered.
value
- the value to be used for filtering.
conditionOrExpressionTree
- (optional) this parameter accepts object of type IFilteringOperation
or IFilteringExpressionsTree
. If only a simple filtering is required a filtering operation could be passes (see bellow for more info). In case of advanced filtering an expressions tree containing complex filtering logic could be passed.
ignoreCase
- (optional) - whether the filtering would be case sensitive or not.
- Breaking change
onFilteringDone
event now have only one parameter - IFilteringExpressionsTree
which contains the filtering state of the filtered column.
filter_global
method clears all existing filters and applies the new filtering condition to all grid's columns.
filtering operands:
- Breaking change
IFilteringExpression
condition property is no longer a direct reference to a filtering condition method, instead it's a reference to an IFilteringOperation
- 5 filtering operand classes are now exposed
IgxFilteringOperand
is a base filtering operand, which can be inherited when defining custom filtering conditions
IgxBooleanFilteringOperand
defines all default filtering conditions for boolean
types
IgxNumberFilteringOperand
defines all default filtering conditions for numeric
types
IgxStringFilteringOperand
defines all default filtering conditions for string
types
IgxDateFilteringOperand
defines all default filtering conditions for Date
types
IgxColumnComponent
now exposes a filters
property, which takes an IgxFilteringOperand
class reference
- Custom filters can now be provided to grid columns by populating the
operations
property of the IgxFilteringOperand
with operations of IFilteringOperation
type
`
export class IgxCustomFilteringOperand extends IgxFilteringOperand {
// Making the implementation singleton
private static _instance: IgxCustomFilteringOperand = null;
protected constructor() {
super();
this.operations = [{
name: 'custom',
logic: (target: string) => {
return target === 'My custom filter';
}
}].concat(this.operations); // Keep the empty and notEmpty conditions from base
}
// singleton
// Must implement this method, because the IgxColumnComponent expects it
public static instance(): IgxCustomFilteringOperand {
return this.instance || (this.instance = new this());
}
}
`
igxGrid
now supports grouping of columns enabling users to create criteria for organizing data records. To explore the functionality start off by setting some columns as groupable
:
<igx-grid [data]="data">
<igx-column [field]="'ProductName'"></igx-column>
<igx-column [field]="'ReleaseDate'" [groupable]="true"></igx-column>
</igx-grid>
For more information, please head over to igxGrid
's ReadMe or the official documentation.
igxGrid
now supports multi-column headers allowing you to have multiple levels of columns in the header area of the grid.
For more information, head over to official documentation
igxGrid
theme now has support for alternating grid row background and text colors.
igxGrid
now has a toolbar (shown using the showToolbar
property) which contains the following features:
- title (specified using the
toolbarTitle
property)
- column hiding feature (enabled using the
columnHiding
property)
- column pinning feature (enabled using the
columnPinning
property)
- export to excel (enabled using the
exportExcel
property)
- export to CSV (enabled using the
exportCsv
property)
igxColumn
changes:
- Breaking change filteringExpressions property is removed.
igxGrid
API is updated
- Breaking change deleteRow(rowSelector: any) method will delete the specified row only if the primary key is defined. The method accept rowSelector as a parameter, which is the rowID.
- Breaking change updateRow(value: any, rowSelector: any) method will update the specified row only if the primary key is defined. The method accept value and rowSelector as a parameter, which is the rowID.
- Breaking change updateCell(value: any, rowSelector: any, column: string) method will update the specified cell only if the primary key is defined. The method accept value, rowSelector,which is the rowID and column name.
- getCellByKey(rowSelector: any, columnField: string) method is added to grid's API. This method retuns a cell or undefined only if primary key is defined and search for the specified cell by the rowID and column name.
- getCellByColumn(rowIndex: number, columnField: string) method is updated. This method returns a cell or undefined by using rowIndex and column name.
IgxGridRow
API is updated:
- update(value: any) method is added. The method takes as a parameter the new value, which is to be set to the specidied row.
- delete() method is added. The method removes the specified row from the grid's data source.
igxCell
default editing template is changed according column data type. For more information you can read the specification or the official documentation
igxCombo
component added
<igx-combo #combo [data]="towns" [displayKey]="'townName'" [valueKey]="'postCode'" [groupKey]="'province'"
[allowCustomValues]="true" placeholder="Town(s)" searchPlaceholder="Search town..."></igx-combo>
igxCombo features:
- Data Binding
- Value Binding
- Virtualized list
- Multiple Selection
- Filtering
- Grouping
- Custom values
- Templates
- Integration with Template Driven and Reactive Forms
- Keyboard Navigation
- Accessibility compliance
For more detailed information see the official igxCombo documentation.
igxDropdown
component added
<igx-drop-down (onSelection)="onSelection($event)" (onOpening)="onOpening($event)">
<igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
{{ item.field }}
</igx-drop-down-item>
</igx-drop-down>
igxDropDown displays a scrollable list of items which may be visually grouped and supports selection of a single item. Clicking or tapping an item selects it and closes the Drop Down.
A walkthrough of how to get started can be found here
igxDropdown features:
- Single Selection
- Grouping
- Keyboard Navigation
- Accessibility compliance
igxChip
and igxChipsArea
components added
<igx-chips-area>
<igx-chip *ngFor="let chip of chipList" [id]="chip.id">
<label igxLabel>{{chip.text}}</label>
</igx-chip>
</igx-chips-area>
For more detailed information see the official igxChip documentation.
igxToggle
changes
onOpening
event added.
onClosing
event added.
igxToggleAction
new overlaySettings
input controls how applicable targets display content. Provides defaults with positioning based on the host element. The closeOnOutsideClick
input is deprecated in favor of the new settings and will be removed in the future.
igxList
now supports a 'loading' template which is shown when the list is empty and its new isLoading
property is set to true
. You can redefine the default loading template by adding an ng-template
with the igxDataLoading
directive:
<igx-list [isLoading]="true">
<ng-template igxDataLoading>
<p>Please wait, data is loading...</p>
</ng-template>
</igx-list>
Breaking changes:
- Removed submodule imports. All imports are now resolved from the top level
igniteui-angular
package.
igxGrid
changes:
- sort API now accepts params of type
ISortingExpression
or Array<ISortingExpression>
.
igxToggle
changes
collapsed
now read-only, markup input is removed.
onOpen
event renamed to onOpened
.
onClose
event renamed to onClosed
.
open
method does not accept fireEvents optional boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings
.
close
method does not accept fireEvents optional boolean parameter.
toggle
method does not accept fireEvents optional boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings
.
igxDialog
changes
open
method does not accept fireEvents boolean parameter. Now it accepts only overlaySettings optional parameter of type OverlaySettings
.
- Breaking change All properties that were named
isDisabled
have been renamed to disabled
in order to acheive consistency across our component suite. This affects: date-picker, input directive, input-group, dropdown-item, tabbar and time-picker.
- The deprecated
igxForRemote
input for the igxFor
directive is now removed. Setting the required totalItemCount
property after receiving the first data chunk is enough to trigger the required functionality.
6.0.4
- igxRadioGroup directive introduced. It allows better control over its child
igxRadio
components and support template-driven and reactive forms.
- Fixed ReactiveForms validations support for IgxInputGroup. Related issue.
6.0.3
- igxGrid exposing the
filteredSortedData
method publicly - returns the grid data with current filtering and sorting applied.
6.0.2
- igxGrid Improve scrolling on mac #1563
- The
ng update igniteui-angular
migration schematics now also update the theme import path in SASS files. #1582
6.0.1
Introduced migration schematics to integrate with the Angular CLI update command. You can now run
ng update igniteui-angular
in existing projects to both update the package and apply any migrations needed to your project. Make sure to commit project state before proceeding.
Currently these cover converting submodule imports as well as the deprecation of igxForRemote
and rename of igx-tab-bar
to igx-bottom-nav
from 6.0.0.
- Breaking changes:
- Removed submodule imports. All imports are now resolved from the top level
igniteui-angular
package. You can use ng update igniteui-angular
when updating to automatically convert existing submodule imports in the project.
- Summary functions for each IgxSummaryOperand class has been made
static
. So now you can use them in the following way:import { IgxNumberSummaryOperand, IgxSummaryOperand } from "igniteui-angular";
class CustomSummary extends IgxSummaryOperand {
constructor() {
super();
}
public operate(data?: any[]) {
const result = super.operate(data);
result.push({
key: "Min",
label: "Min",
summaryResult: IgxNumberSummaryOperand.min(data)
});
return result;
}
}
6.0.0
- Theming - You can now use css variables to style the component instances you include in your project.
- Added
onDoubleClick
output to igxGrid
to emit the double clicked cell.
- Added
findNext
, findPrev
and clearSearch
methods to the IgxGridComponent which allow easy search of the grid data, even when the grid is virtualized.
- Added
IgxTextHighlightDirective
which highlights parts of a DOM element and keeps and updates "active" highlight.
- Added
All
option to the filter UI select for boolean columns
- Update to Angular 6
5.3.1
- igx-dialog changes
- Dialog title as well as dialog actions (buttons) can be customized. For more information navigate to the ReadMe.
- Filtering a boolean column by
false
condition will return only the real false
values, excluding null
and undefined
. Filtering by Null
will return the null
values and filtering by Empty
will return the undefined
.
- The
Filter
button in the filtering UI is replaced with a Close
button that is always active and closes the UI.
- Filtering UI input displays a
X
icon that clears the input.
5.3.0
- Added
rowSelectable
property to igxGrid
- Setting
rowSelectable
to true
enables multiple row selection for the igx-grid
component. Adds a checkbox column that allows (de)selection of one, multiple or all (via header checkbox) rows.
- For more information about the
rowSelectable
property and working with grid row, please read the igxGrid
's ReadMe about selection or see the official documentation
- Added
onContextMenu
output to igxGrid
to emit the clicked cell.
igx-datePicker
: Added onClose
event.
igxTextSelection
directive added
igxTextSelection
directive allows you to select the whole text range for every element with text content it is applied.
igxFocus
directive added
igxFocus
directive allows you to force focus for every element it is applied.
igx-time-picker
component added
igx-time-picker
allows user to select time, from a dialog with spinners, which is presented into input field.
- For more information navigate to the ReadMe.
igx-tab-bar
changes
- Breaking changes:
IgxTabBarComponent
is renamed to IgxBottomNavComponent
and IgxTabBarModule
is renamed to IgxBottomNavModule
.
igx-tab-bar
selector is deprecated. Use igx-bottom-nav
selector instead.
igx-tabs
component added
igx-tabs
allows users to switch between different views. The igx-tabs
component places the tabs headers at the top and allows scrolling when there are multiple tab items outside the visible area. Tabs are ordered in a single row above their associated content.
- For more information navigate to ReadMe.
- Added column pinning in the list of features available for
igxGrid
. Pinning is available though the API. Try the following: const column = this.grid.getColumnByName(name);
column.pin();
For more information, please head over to igxGrid
's ReadMe or the official documentation.
- Added
summaries
feature to igxGrid
, enabled on a per-column level. Grid summaries gives you a predefined set of default summaries, depending on the type of data in the column.
For more detailed information read igxGrid
's ReadMe or see the official documentation.
- Added
columnWidth
option to igxGrid
. The option sets the default width that will be applied to columns that have no explicit width set. For more detailed information read igxGrid
's ReadMe
- Added API to
igxGrid
that allows for vertical remote virtualization. For guidance on how to implement such in your application, please refer to the official documentation
- Added smooth scrolling for the
igxForOf
directive making the scrolling experience both vertically and horizontally much more natural and similar to a native scroll.
- Added
onCellClick
event.
igxForOf
now requires that its parent container's overflow
is set to hidden
and position
to relative
. It is recommended that its height is set as well so that the display container of the virtualized content can be positioned with an offset inside without visually affecting other elements on the page. <div style='position: relative; height: 500px; overflow: hidden'>
<ng-template igxFor let-item [igxForOf]="data" #virtDirVertical
[igxForScrollOrientation]="'vertical'"
[igxForContainerSize]='"500px"'
[igxForItemSize]='"50px"'
let-rowIndex="index">
<div style='height: 50px;'>{{rowIndex}} : {{item.text}}</div>
</ng-template>
</div>
- Removed the
dirty
local template variable previously exposed by the igxFor
directive.
- The
igxForRemote
input for the igxFor
directive is now deprecated. Setting the required totalItemCount
property after receiving the first data chunk is enough to trigger the required functionality.
- the
igx-icon
component can now work with both glyph and ligature-based icon font sets. We've also included a brand new Icon Service, which helps you create aliases for the icon fonts you've included in your project. The service also allows you to define the default icon set used throughout your app.
- Added the option to conditionally disable the
igx-ripple
directive through the igxRippleDisabled
property.
- Updated styling and interaction animations of the
igx-checkbox
, igx-switch
, and igx-radio
components.
- Added
indeterminate
property and styling to the igx-checkbox
component.
- Added
required
property to the igx-checkbox
, igx-radio
, and igx-switch
components.
- Added
igx-ripple
effect to the igx-checkbox
, igx-switch
, and igx-radio
components. The effect can be disabled through the disableRipple
property.
- Added the ability to specify the label location in the
igx-checkbox
, igx-switch
, and igx-radio
components through the labelPosition
property. It can either be before
or after
.
- You can now use any element as label on the
igx-checkbox
, igx-switch
, and igx-radio
components via the aria-labelledby property.
- You can now have invisible label on the
igx-checkbox
, igx-switch
, and igx-radio
components via the aria-label property.
- Added the ability to toggle the
igx-checkbox
and igx-switch
checked state programmatically via toggle
method on the component instance.
- Added the ability to select an
igx-radio
programmatically via select
method on the component instance.
- Fixed a bug on the
igx-checkbox
and igx-radio
components where the click event was being triggered twice on click.
- Fixed a bug where the
igx-checkbox
, igx-switch
, and igx-radio
change event was not being triggered on label click.
igxМask
directive added
igxМask
provide means for controlling user input and formatting the visible value based on a configurable mask rules. For more detailed information see igxMask README file
igxInputGroup
component added - used as a container for the igxLabel
, igxInput
, igxPrefix
, igxSuffix
and igxHint
directives.
igxPrefix
directive added - used for input prefixes.
igxSuffix
directive added - used for input suffixes.
igxHint
directive added - used for input hints.
igxInput
directive breaking changes:
- the directive should be wrapped by
igxInputGroup
component
IgxInputGroupModule
should be imported instead of IgxInputModule
igxExcelExportService
and igxCSVExportService
added. They add export capabilities to the igxGrid
. For more information, please visit the igxExcelExportService specification and the igxCSVExportService specification.
- General
- Added event argument types to all
EventEmitter
@Output
s. #798 #740
- Reviewed and added missing argument types to the following
EventEmitter
s
- The
igxGrid
onEditDone
now exposes arguments of type IGridEditEventArgs
. The arguments expose row
and cell
objects where if the editing is performed on a cell, the edited cell
and the row
the cell belongs to are exposed. If row editing is performed, the cell
object is null. In addition the currentValue
and newValue
arguments are exposed. If you assign a value to the newValue
in your handler, then the editing will conclude with the value you've supplied.
- The
igxGrid
onSelection
now correctly propagates the original event
in the IGridCellEventArgs
.
- Added
jsZip
as a Peer Dependency.
primaryKey
attribute added to igxGrid
primaryKey
allows for a property name from the data source to be specified. If specified, primaryKey
can be used instead of index
to indentify grid rows from the igxGrid.rowList
. As such, primaryKey
can be used for selecting rows for the following igxGrid
methods - deleteRow
, updateRow
, updateCell
, getCellByColumn
, getRowByKey
primaryKey
requires all of the data for the specified property name to have unique values in order to function as expected.
- as it provides a unique identifier for each data member (and therefore row),
primaryKey
is best suited for addressing grid row entries. If DOM virtualization is in place for the grid data, the row index
property can be reused (for instance, when filtering/sorting the data), whereas primaryKey
remains unique. Ideally, when a persistent reference to a row has to be established, primaryKey
should be used.
- Theming
- Added a
utilities
module to the theming engine to allow for easier import of theming functions and mixins, such as igx-color, igx-palette, igx-elevation, etc. To import the utilities do @import '~igniteui-angular/core/styles/themes/utilities';
5.2.1
hammerjs
and @types/hammerjs
are removed from peerDependencies
and were added as dependencies
. So if you are using Igniteui-Angular version 5.2.1 or above it is enough to run npm install igniteui-angular
in your project for getting started. For more detailed information see Ignite UI for Angular Getting Started
web-animations-js
is added as Peer Dependency.
Theming
bug fixes and improvements.
- Use the following command to generate
Ignite UI for Angular Themes
documentation - npm run build:docs
. Navigate to dist/docs/sass
and open index.html
file.
5.2.0