Releases: IgniteUI/igniteui-angular
9.1.0-rc.1
9.1.0
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateRangeStartComponentandIgxDateRangeEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
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
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - Added
dragDirectioninput that can specify only one direction of dragging or both.
- Added
-
IgxChip- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndexinput so it can support change detection as well.
-
IgxHighlightDirective- New
metadataproperty was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
- New
RTL Support
igxSliderhave full right-to-left (RTL) support.
8.2.29
9.1.0-rc.0
9.1.0
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateRangeStartComponentandIgxDateRangeEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
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
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - Added
dragDirectioninput that can specify only one direction of dragging or both.
- Added
-
IgxChip- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndexinput so it can support change detection as well.
-
IgxHighlightDirective- New
metadataproperty was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
- New
RTL Support
igxSliderhave full right-to-left (RTL) support.
9.1.0-alpha.14
9.1.0
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateStartComponentandIgxDateEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
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
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - Added
dragDirectioninput that can specify only one direction of dragging or both.
- Added
-
IgxChip- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndexinput so it can support change detection as well.
-
IgxHighlightDirective- New
metadataproperty was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
- New
RTL Support
igxSliderhave full right-to-left (RTL) support.
9.0.15
8.2.28
9.1.0-alpha.13
9.1.0
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateStartComponentandIgxDateEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
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
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - Added
dragDirectioninput that can specify only one direction of dragging or both.
- Added
-
IgxChip- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndexinput so it can support change detection as well.
-
IgxHighlightDirective- New
metadataproperty was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
- New
RTL Support
igxSliderhave full right-to-left (RTL) support.
9.0.14
9.1.0-alpha.12
9.1.0
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateStartComponentandIgxDateEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
onGridKeydownevent is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
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
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - Added
dragDirectioninput that can specify only one direction of dragging or both.
- Added
-
IgxChip- Added support for tabIndex attribute applied to the main chip element.
- Added
tabIndexinput so it can support change detection as well.
RTL Support
igxSliderhave full right-to-left (RTL) support.
9.1.0-alpha.11
General
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Behavioral Change - When a column is sortable sort indicator is always visible. The column is sorted when click on it.
-
igx-paginator- The following inputs have been deprecated for thepaginatorcomponent and will be removed in future versionsselectLabelandprepositionPageUse 'resourceStrings' to set/get values.
-
IgxInputGroup- Renamed
supressInputAutofocusinput tosuppressInputAutofocus - Clicking on prefix, suffix or label elements in the Input Group will no longer blur and re-focus the input.
- Renamed
Themes
- Breaking Change Change the default
$legacy-supportvalue to false in theigx-themefunction.
New Features
-
IgxDateTimeEditordirective added.-
Allows the user to set and edit
dateandtimein a chosen input element. -
Can edit
dateortimeportion, using an editable masked input. -
Additionally, can specify a desired
displayandinputformat, as well asminandmaxvalues. -
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>
-
-
IgxDateRangePickercomponent added.- Allows the selection of a range of dates from a calendar UI or input fields. Supports
dialoganddropdownmodes. - Added
IgxDateStartComponentandIgxDateEndComponent. - 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
IgxPickerToggleComponentwhich allows templating of the default icon in the input throughigxPrefixandigxSuffix.- 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>
- Allows the selection of a range of dates from a calendar UI or input fields. Supports
-
IgxActionStripcomponent 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>
- Provides a template area for one or more actions. In its simplest form the Action Strip
-
igxSplittercomponent 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 thetypeinput.
<igx-splitter [type]="type"> <igx-splitter-pane> ... </igx-splitter-pane> <igx-splitter-pane> ... </igx-splitter-pane> </igx-splitter>
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
-
IgxGrid,IgxTreeGrid,IgxHierarchicalGrid- Added ability to pin rows to top or bottom depending on the new
pinninginput.
And new API methodspinRowandunpinRow.
<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
pinninginput.
<igx-grid [data]="data" [pinning]="pinningConfiguration"></igx-grid>
public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
- Added functionality for column selection.
columnSelectionproperty has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.selectedproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selected.selectableproperty has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.onColumnSelectionChangeevent is added for theIgxGrid. It is emitted when the column selection is changed.excelStyleSelectingTemplateproperty is introduced to IgxGrid, which allows you to set a custom template for the selecting a column in the Excel Style Filter.selectedColumnsAPI method is added for theIgxGrid. It allows to get all selected columns.selectColumnsAPI method is added for theIgxGrid. It allows to select columns by passing array of IgxColumnComponent or column fields.deselectColumnsAPI method is added for theIgxGrid. It allows to deselect columns by passing array of IgxColumnComponent or column fields.deselectAllColumnsAPI method is added for theIgxGrid. It allows to deselect all columns.getSelectedColumnsDataAPI method is added for theIgxGrid. 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
tabkey to navigate between the cell in the Igx Grid. The navigation is performed only with arrow keys. - when you are in edit mode with
tabkey you can navigate to the next editable cell. page upandpage downkeys 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;
- you can not use
onGridKeydownevent is deprecated. Now you can directly bind to keydown on the IgxGrid component in order to perform custom keyboard navigation.
- Added ability to pin rows to top or bottom depending on the new
-
IgxCombo:- Added
autoFocusSearchinput that allows to manipulate the combo's opening behavior. When the property istrue(by default), the combo's search input is focused on open. When set tofalse, 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.
- Added
-
IgxToast:- Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
-
IgxDrag- New
igxDragIgnoredirective that allows children of theigxDragelement to be interactable and receive mouse events. Dragging cannot be performed from those elements that are ignored. - New
dragDirectioninput that can specify only one direction of dragging or both.
- New
RTL Support
igxSliderhave full right-to-left (RTL) support.