12.0.0

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
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="'dd/MM/yyyy'">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix>
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - igxDatePickerActions is renamed to igxPickerActions
  • Behavioral Change - Upon opening, the focused date will always be the selected/bound date. If there is no selected/bound date, the date picker will focus today's date. If minValue and/or maxValue are applied and today's date (or the bound date) is outside of the specified range, the focused date will be respectively minValue or maxValue.
• IgxTimePicker
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix>
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Behavioral Change - The dropdown/dialog displays time portions within minValue and maxValue range if set or time between 00:00 and 24:00 in the provided inputFormat. The displayed values for each time portion are calculated based on the items delta always starting from zero. If the minValue or maxValue does not match the items delta, the displayed values will start/end from the next/last possible value that matches the delta. Upon opening, the selected time will be the bound value. In cases when there is not a bound value, it is outside the min/max range or does not match the items delta, the selected time will be the closest possible time that matches the items delta.
• 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

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control ...

12.0.0-rc.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
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="'dd/MM/yyyy'">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix>
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - igxDatePickerActions is renamed to igxPickerActions
  • Behavioral Change - Upon opening, the focused date will always be the selected/bound date. If there is no selected/bound date, the date picker will focus today's date. If minValue and/or maxValue are applied and today's date (or the bound date) is outside of the specified range, the focused date will be respectively minValue or maxValue.
• IgxTimePicker
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix>
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Behavioral Change - The dropdown/dialog displays time portions within minValue and maxValue range if set or time between 00:00 and 24:00 in the provided inputFormat. The displayed values for each time portion are calculated based on the items delta always starting from zero. If the minValue or maxValue does not match the items delta, the displayed values will start/end from the next/last possible value that matches the delta. Upon opening, the selected time will be the bound value. In cases when there is not a bound value, it is outside the min/max range or does not match the items delta, the selected time will be the closest possible time that matches the items delta.
• 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

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control ...

12.0.0-rc.0

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
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="'dd/MM/yyyy'">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix>
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - igxDatePickerActions is renamed to igxPickerActions
  • Behavioral Change - Upon opening, the focused date will always be the selected/bound date. If there is no selected/bound date, the date picker will focus today's date. If minValue and/or maxValue are applied and today's date (or the bound date) is outside of the specified range, the focused date will be respectively minValue or maxValue.
• IgxTimePicker
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix>
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix>
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Behavioral Change - The dropdown/dialog displays time portions within minValue and maxValue range if set or time between 00:00 and 24:00 in the provided inputFormat. The displayed values for each time portion are calculated based on the items delta always starting from zero. If the minValue or maxValue does not match the items delta, the displayed values will start/end from the next/last possible value that matches the delta. Upon opening, the selected time will be the bound value. In cases when there is not a bound value, it is outside the min/max range or does not match the items delta, the selected time will be the closest possible time that matches the items delta.
• 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

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control ...

11.2.0-alpha.14

feat(calendar): update calendar min width. (#9525)

Co-authored-by: MPopov <[email protected]>

12.0.0-alpha.1

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

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChange event is renamed to valueChange.
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Feature - spinDelta input property which allows a user to provide different delta values that will be used for spinning. All parts default to 1.
  • increment and decrement methods now accept an optional delta parameter which targets the currently spun date portion. It takes precedence over the values set in spinDelta.

• IgxDatePicker

  • Feature - value accepts ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-picker>

  • Breaking Change - value type could be Date or string.
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: formatter, context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="datePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by the overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.

• IgxTimePicker

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="timePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.

• IgxDateRangePicker

  • Feature - value start and end accept ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-range-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-range-picker>

  • Breaking Change - value start and end types could be Date or string.
  • 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....

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

• IgxDateTimeEditor

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChange event is renamed to valueChange.
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Feature - spinDelta input property which allows a user to provide different delta values that will be used for spinning. All parts default to 1.
  • increment and decrement methods now accept an optional delta parameter which targets the currently spun date portion. It takes precedence over the values set in spinDelta.

• IgxDatePicker

  • Feature - value accepts ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-picker>

  • Breaking Change - value type could be Date or string.
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: formatter, context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="datePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by the overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.

• IgxTimePicker

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="timePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.

• IgxDateRangePicker

  • Feature - value start and end accept ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-range-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-range-picker>

  • Breaking Change - value start and end types could be Date or string.
  • 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

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered...

10.2.22

Bug fixing

• Column values in Excel Style Filtering dialog are sorted in case-sensitive order #9307
• A console error is thrown when attempting to redo the deletion of a record with collapsed children #9465
• GroupBy sorting does not work as expected after loading igxGrid state #9257
• When paging is enabled, grid does not update its view #9246
• Grid filter template demo throws errors while editing #9336

11.1.10

Bug fixing

• Grid filter template demo throws errors while editing #9336
• Currency and percent in Data Grid Column Types should be right-aligned #9305
• IgxGridState: If a column template contains *ngIf or *ngFor, an error is thrown when a cell enters edit mode after restoring the state. #9341
• A console error is thrown when attempting to redo the deletion of a record with collapsed children #9465
• Column values in Excel Style Filtering dialog are sorted in case-sensitive order #9307
• When paging is enabled, grid does not update its view #9246
• GroupBy sorting does not work as expected after loading igxGrid state #9257
• Carousel KB navigation is not working #9329

11.2.0-alpha.13

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

• IgxDateTimeEditor

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChange event is renamed to valueChange.
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Feature - spinDelta input property which allows a user to provide different delta values that will be used for spinning. All parts default to 1.
  • increment and decrement methods now accept an optional delta parameter which targets the currently spun date portion. It takes precedence over the values set in spinDelta.

• IgxDatePicker

  • Feature - value accepts ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-picker>

  • Breaking Change - value type could be Date or string.
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: formatter, context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="datePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by the overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.

• IgxTimePicker

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="timePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.

• IgxDateRangePicker

  • Feature - value start and end accept ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-range-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-range-picker>

  • Breaking Change - value start and end types could be Date or string.
  • 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

New Features

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered.
  • Features API for handling selection (bi-state and cascading), node activation, node expansion state.
  • Features extensive and easy-to-use keyboard navigation, fully compliant with W3 standards.
  • Code example for a tree contructured from a hierarchical data set:

      <igx-tree>
          <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpanded(node)" [selected]="isNodeSelected...
  

11.2.0-alpha.12

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

• IgxDateTimeEditor

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChange event is renamed to valueChange.
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Feature - spinDelta input property which allows a user to provide different delta values that will be used for spinning. All parts default to 1.
  • increment and decrement methods now accept an optional delta parameter which targets the currently spun date portion. It takes precedence over the values set in spinDelta.

• IgxDatePicker

  • Feature - value accepts ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-picker>

  • Breaking Change - value type could be Date or string.
  • Breaking Change - onSelection event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-date-picker while the following properties are deleted or deprecated: formatter, context, labelInternal, template.

        <igx-date-picker #datePicker [(value)]="date" [displayFormat]="'longDate'" [inputFormat]="dd/MM/yyyy">
            <label igxLabel>Date: </label>
            <igx-picker-toggle igxPrefix (click)="datePicker.toggle()">
                calendar_view_day
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="datePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-date-picker>

  • Breaking Change - mode and format are replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - editorTabIndex is renamed to tabIndex.
  • Breaking Change - monthsViewNumber is renamed to displayMonthsCount.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - displayData is renamed to displayFormat.
  • Breaking Change - dropDownOverlaySettings and modalOverlaySettings are replaced by the overlaySettings.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.
  • Breaking Change - onDisabledDate event is removed.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.

• IgxTimePicker

  • Feature - value accepts ISO 8601 string format.
  • Breaking Change - value type could be Date or string.
  • Breaking Change - onValueChanged event is renamed to valueChange.
  • Breaking Change - new way to define custom elements in the igx-time-picker while the following properties are deleted or deprecated: context, promptChar, displayTime, template.

        <igx-time-picker #timePicker [(value)]="time" [displayFormat]="'mediumTime'" [inputFormat]="hh:mm:ss">
            <label igxLabel>Time: </label>
            <igx-picker-toggle igxPrefix (click)="timePicker.toggle()">
                alarm
            </igx-picker-toggle>
            <igx-picker-clear igxSuffix (click)="timePicker.clear()">
                delete
            </igx-picker-clear>
        </igx-time-picker>

  • Breaking Change - format is replaced by inputFormat.
  • Breaking Change - placeholder defaults to the inputFormat
  • Breaking Change - isSpinLoop property is renamed to spinLoop.
  • Breaking Change - vertical is renamed to headerOrientation.
  • Breaking Change - onOpening, onOpened, onClosing and onClosed events are renamed respectively to opening, opened, closing and closed.
  • Breaking Change - onValidationFailed event is renamed to validationFailed.

• IgxDateRangePicker

  • Feature - value start and end accept ISO 8601 string format.
  • Feature - The actions template now exposes the Calendar component as implicit context:

    <igx-date-range-picker>
      <ng-template igxPickerActions let-calendar>
        <button igxButton="flat" (click)="calendar.viewDate = today">Today</button>
      </ng-template>
    </igx-date-range-picker>

  • Breaking Change - value start and end types could be Date or string.
  • 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.

New Features

• Added IgxTree component
  • Allows users to render hierarchical data in an easy-to-navigate way. The control is not data bound and takes a declarative approach, giving users more control over what is being rendered.
  • Features API for handling selection (bi-state and cascading), node activation, node expansion state.
  • Features extensive and easy-to-use keyboard navigation, fully compliant with W3 standards.
  • Code example for a tree contructured from a hierarchical data set:

      <igx-tree>
          <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpanded(node)" [selected]="isNodeSelected(node)">
              {{ node.text }}
              <img [src]="node.image" alt="node.imageAlt" />
              <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpanded(child)" [selected]="isNodeSelected(child)">
                  {{ child.text }}
                  <igx-tree-node *ngFor="let leafChild of child.children" [data]="leafChild" [expanded]="isNodeExpanded(leafChild)" [selected]="isNodeSelected(leafChild)">
                      <a igxTreeNodeLink href=...