8.1.12

Bug Fixing

• [igx-grid] disabled igxButton="flat | icon" don't look like disabled in the igxToolbarCustomContent. #4958
• Pressing Down Arrow while summaries are focused throws an error in igxHierarchicalGrid #5552
• When browser is zoomed cannot select last cell with keyboard #4520
• NavDrawer breaks server-side rendering #4426
• [Combo] label is positioned incorrectly #5599
• Paging is not working #5949

9.0.0-alpha.4

Bug Fixes

• Moving grid cell width host-bindings to templates only so that they can be correctly applied with Ivy

9.0.0-alpha.3

New Features

• Initial Ivy support
  • Ivy-enabled apps should be able to build & run

8.2.2

Features

• The current properties ghostOffsetX and ghostOffsetY do not return the default offset the igxDrag has calculated. #5852

Bug fixes

• IgxGrid binding issues #5751
• Invalid comment formats which are not parsed correctly by typedoc. #3183
• [igx-select] Select component doesn't respect injected display density #5843
• Updating a number column with value 0 does not mark the row as updated #5855
• Multi-View Calendar API Issues #5859
• Calendar KB navigation issues #5856
• When dynamically add/remove columns the grid is not resized correct #5845
• Condition dropdown in Advanced Filtering Dialog has incorrect position #5884

8.1.11

Bug fixes

• IgxGrid binding issues #5751
• Invalid comment formats which are not parsed correctly by typedoc. #3183
• [igx-select] Select component doesn't respect injected display density #5843
• Updating a number column with value 0 does not mark the row as updated #5855

8.2.1

Bug fixing

• Expose *Change events for state inputs so that users can two-way bind their models #3323
• The thumb is not correctly positioned in Firefox and lost focus in IE11 #5762
• When pin a group column in child grid the layout is broken #5204
• Error is thrown on child grid initialization if Load On Demand is enabled and displayDensity is set. #5683
• Excel Style Filtering Overlay not fully shown on limited space #5773

8.1.10

Bug fixes

• Error is thrown on child grid initialization if Load On Demand is enabled and displayDensity is set. #5683
• Error is thrown when delete child column from a column group #5837
• When pin a group column in child grid the layout is broken #5204
• Excel Style Filtering Overlay not fully shown on limited space #5773

7.3.20

Bug fixes

• IgxGrid binding issues #5751
• Error is thrown on child grid initialization if Load On Demand is enabled and displayDensity is set. #5683
• When pin a group column in child grid the layout is broken #5204

8.2.0

8.2.0

New theme

Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.
Depending on your use case you can use one of the following mixins:
igx-fluent-theme and igx-fluent-dark-theme

We also added two new pallets that go with the new theme, $fluent-word-palette and $fluent-excel-palette.

Next example shows how you can use the Fluent theme.

// Light version
.fluent-word-theme {
    @include igx-fluent-theme($fluent-word-palette);
}

// Dark version
.fluent-excel-dark-theme {
    @include igx-fluent-dark-theme($fluent-excel-palette);
}

Theme Changes

igx-badge-theme - Removed the $disable-shadow property to mitigate confusion when specifying $shadow explicitly.

For more information about the theming please read our documentation

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Advanced Filtering functionality is added. In the advanced filtering dialog, you could create groups of conditions across all grid columns. The advanced filtering button is shown in the grid's toolbar when allowAdvancedFiltering and showToolbar properties are set to true. You could also open/close the advanced filtering dialog using the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods.
  • uniqueColumnValuesStrategy input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
  • [filterStrategy] - input that allows you to override the default filtering strategy
  • igxExcelStyleLoading directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
  • introduced new properties cellSelection and rowSelection which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also hideRowSelectors property is added, which allows you to show and hide row selectors when row selection is enabled.
  • introduced functionality for templating row and header selectors - spec

  <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID">
      <igx-column field="Name"></igx-column>
      <igx-column field="Age"></igx-column>
  
      <ng-template igxHeadSelector let-headSelector>
          <igx-icon>done_all</igx-icon>
      </ng-template>
      <ng-template igxRowSelector let-rowContext>
          <igx-switch [checked]="rowContext.selected"></igx-switch>
      </ng-template>
  </igx-grid>

• IgxHierarchicalGrid
  • Row Islands now emit child grid events with an additional argument - owner, which holds reference to the related child grid component instance.
• IgxDrag
  • Dragging without ghost. Now it is possible to drag the base element igxDrag is instanced on by setting the new input ghost to false.
  • Ghost template. A custom ghost template reference can be provided on the new ghostTemplate input.
  • Dragging using a single or multiple handles. New igxDragHandle directive is exposed to specify a handle by which an element can be interacted with instead of the whole element igxDrag is instanced on.
  • Linking of drag and drop elements. This can be achieved by using the new provided dragChannel input, specifying each element to which channel it corresponds.
  • Drag animation improvements. Three new methods have been exposed in place of the old animateToOrigin input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. setLocation, transitionToOrigin and transitionTo are all methods that provide a various way to animate a transition to a specific location for the dragged element.
  • New getters - location and originLocation to aid in applying transition animations.
  • New outputs - dragMove, ghostCreate and ghostDestroy
• IgxDrop
  • Linking of drag and drop elements. This can be achieved by using the new provided dropChannel input, specifying each drop area to which channel it corresponds.
  • Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert. Also an input dropStrategy to the igxDrop which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
• IgxCheckbox
  • introduced a new readonly property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
• IgxOverlay
  • introduced a new ContainerPositionStrategy. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
• IgxChip
  • add onSelectionDone event that is triggered after all animations and transitions related to selection have ended.
• IgxCalendar
  • introduced a multi view for the calendar. Using the new monthsViewNumber input the number of displayed months is set, while the days not belonging to the current month can be hidden using the hideOutsideDays boolean input.
• IgxDatePicker
  • Using the new monthsViewNumber input the number of months displayed is set, while the days not belonging to the current month can be hidden using the hideOutsideDays boolean input.

General

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • isCellSelected method has been deprecated. Now you can use selected property.
  • rowSelectable property has been deprecated. Now you can use rowSelection property to enable row selection and also you can show and hide the row selectors by setting hideRowSelectors property to true or false (which is the default value).
  • Removed deprecated event OnFocusChange
  • Breaking Change igxExcelStyleSortingTemplate directive is renamed to igxExcelStyleSorting.
  • Breaking Change igxExcelStyleMovingTemplate directive is renamed to igxExcelStyleMoving.
  • Breaking Change igxExcelStyleHidingTemplate directive is renamed to igxExcelStyleHiding.
  • Breaking Change onRowSelectionChange event arguments are changed. The row property has been removed and the properties added, removed and cancel are newly added.
  • Breaking Change igxExcelStylePinningTemplate directive is renamed to igxExcelStylePinning.
  • Breaking Change onRowDragEnd and onRowDragStart event arguments are changed - owner now holds reference to the grid component instance, while dragDirective hold reference to the drag directive.
  • Behavioral Change The behavior of the isLoading input no longer depends on the state of the data the grid binds to. Setting it to true now shows a loading indicator until it is disabled by the user.

• IgxCombo

  • Combo selection is now consistent when valueKey is defined. When valueKey is specified, selection is based on the value keys of the items. For example:

  <igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>

  export class MyCombo {
      ...
      public combo: IgxComboComponent;
      public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
      ...
      ngOnInit() {
          // Selection is done only by valueKey property value
          this.combo.selectItems([0, 1]);
      }
  }

  • Breaking Change When using [valueKey], combo methods, events and outputs cannot be handled with data item references.
  • For more information, visit the component's readme

• IgxDrag

  • Deprecated inputs - hideBaseOnDrag, animateOnRelease, visible.
  • Deprecated methods - dropFinished.
  • Breaking Change ghostImageClass input is renamed to ghostClass.
  • Breaking Change dragGhostHost input is renamed to ghostHost.
  • Breaking Change returnMoveEnd input is renamed to transitioned.
  • Breaking Change onDragStart output is renamed to dragStart.
  • Breaking Change onDragEnd output is renamed to dragEnd.

• IgxDrop

  • Breaking Change Default drop strategy is now changed to not perform any actions.
  • Breaking Change onEnter output is renamed to enter.
  • Breaking Change onOver output is renamed to over.
  • Breaking Change onLeave output is renamed to leave.
  • Breaking Change onDrop output is renamed to dropped.
  • Breaking Change Interfaces IgxDropEnterEventArgs, IgxDropLeaveEventArgs are both now called IDropBaseEventArgs.
  • Breaking Change Interfaces IgxDropEventArgs is renamed to IDropDroppedEventArgs.
  • Breaking Change Outputs enter, over, leave(former onEnter, onOver, onLeave) now have arguments of type IDropBaseEventArgs
  • Breaking Change Output dropped (former onDrop) now have arguments of type IDropDroppedEventArgs

8.2.0-rc.0

Included:

• Bug fixes
• Selection directive for editable input #5658
• The chip selection icon animation cannot be tracked and forces advance filtering to use setTimeout. #5821

New theme

Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.
Depending on your use case you can use one of the following mixins:
igx-fluent-theme and igx-fluent-dark-theme

We also added two new pallets that go with the new theme, $fluent-word-palette and $fluent-excel-palette.

Next example shows how you can use the Fluent theme.

// Light version
.fluent-word-theme {
    @include igx-fluent-theme($fluent-word-palette);
}

// Dark version
.fluent-excel-dark-theme {
    @include igx-fluent-dark-theme($fluent-excel-palette);
}

For more information about the theming please read our documentation

New Features

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid
  • Advanced Filtering functionality is added. In the advanced filtering dialog, you could create groups of conditions across all grid columns. The advanced filtering button is shown in the grid's toolbar when allowAdvancedFiltering and showToolbar properties are set to true. You could also open/close the advanced filtering dialog using the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods.
  • uniqueColumnValuesStrategy input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
  • [filterStrategy] - input that allows you to override the default filtering strategy
  • igxExcelStyleLoading directive is added, which can be used to provide a custom loading template for the Excel Style Filtering. If this property is not provided, a default loading template will be used instead.
  • introduced new properties cellSelection and rowSelection which accept GridSelection mode enumeration. Grid selection mode could be none, single or multiple. Also hideRowSelectors property is added, which allows you to show and hide row selectors when row selection is enabled.
  • introduced functionality for templating row and header selectors - spec

  <igx-grid [data]="data", [rowSelection]="'multiple'" primaryKey="ID">
      <igx-column field="Name"></igx-column>
      <igx-column field="Age"></igx-column>
  
      <ng-template igxHeadSelector let-headSelector>
          <igx-icon>done_all</igx-icon>
      </ng-template>
      <ng-template igxRowSelector let-rowContext>
          <igx-switch [checked]="rowContext.selected"></igx-switch>
      </ng-template>
  </igx-grid>

• IgxHierarchicalGrid
  • Row Islands now emit child grid events with an additional argument - owner, which holds reference to the related child grid component instance.
• IgxDrag
  • Dragging without ghost. Now it is possible to drag the base element igxDrag is instanced on by setting the new input ghost to false.
  • Ghost template. A custom ghost template reference can be provided on the new ghostTemplate input.
  • Dragging using a single or multiple handles. New igxDragHandle directive is exposed to specify a handle by which an element can be interacted with instead of the whole element igxDrag is instanced on.
  • Linking of drag and drop elements. This can be achieved by using the new provided dragChannel input, specifying each element to which channel it corresponds.
  • Drag animation improvements. Three new methods have been exposed in place of the old animateToOrigin input in order to provide more flexibility when wanting to have transition animation to specific position when dropping. setLocation, transitionToOrigin and transitionTo are all methods that provide a various way to animate a transition to a specific location for the dragged element.
  • New getters - location and originLocation to aid in applying transition animations.
  • New outputs - dragMove, ghostCreate and ghostDestroy
• IgxDrop
  • Linking of drag and drop elements. This can be achieved by using the new provided dropChannel input, specifying each drop area to which channel it corresponds.
  • Drop strategies. Three new drop strategies have been provided - Append, Prepend and Insert. Also an input dropStrategy to the igxDrop which specify which strategy should be used when dropping an element inside the drop area. Custom one can be specified as well.
• IgxCheckbox
  • introduced a new readonly property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
• IgxOverlay
  • introduced a new ContainerPositionStrategy. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.

General

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • isCellSelected method has been deprecated. Now you can use selected property.
  • rowSelectable property has been deprecated. Now you can use rowSelection property to enable row selection and also you can show and hide the row selectors by setting hideRowSelectors property to true or false (which is the default value).
  • Removed deprecated event OnFocusChange
  • Breaking Change igxExcelStyleSortingTemplate directive is renamed to igxExcelStyleSorting.
  • Breaking Change igxExcelStyleMovingTemplate directive is renamed to igxExcelStyleMoving.
  • Breaking Change igxExcelStyleHidingTemplate directive is renamed to igxExcelStyleHiding.
  • Breaking Change onRowSelectionChange event arguments are changed. The row property has been removed and the properties added, removed and cancel are newly added.
  • Breaking Change igxExcelStylePinningTemplate directive is renamed to igxExcelStylePinning.
  • Breaking Change onRowDragEnd and onRowDragStart event arguments are changed - owner now holds reference to the grid component instance, while dragDirective hold reference to the drag directive.

• IgxCombo

  • Combo selection is now consistent when valueKey is defined. When valueKey is specified, selection is based on the value keys of the items. For example:

  <igx-combo [data]="myCustomData" valueKey="id" displayKey="text"></igx-combo>

  export class MyCombo {
      ...
      public combo: IgxComboComponent;
      public myCustomData: { id: number, text: string } = [{ id: 0, name: "One" }, ...];
      ...
      ngOnInit() {
          // Selection is done only by valueKey property value
          this.combo.selectItems([0, 1]);
      }
  }

  • Breaking Change When using [valueKey], combo methods, events and outputs cannot be handled with data item references.
  • For more information, visit the component's readme

• IgxDrag

  • Deprecated inputs - hideBaseOnDrag, animateOnRelease, visible.
  • Deprecated methods - dropFinished.
  • Breaking Change ghostImageClass input is renamed to ghostClass.
  • Breaking Change dragGhostHost input is renamed to ghostHost.
  • Breaking Change returnMoveEnd input is renamed to transitioned.
  • Breaking Change onDragStart output is renamed to dragStart.
  • Breaking Change onDragEnd output is renamed to dragEnd.

• IgxDrop

  • Breaking Change Default drop strategy is now changed to not perform any actions.
  • Breaking Change onEnter output is renamed to enter.
  • Breaking Change onOver output is renamed to over.
  • Breaking Change onLeave output is renamed to leave.
  • Breaking Change onDrop output is renamed to dropped.
  • Breaking Change Interfaces IgxDropEnterEventArgs, IgxDropLeaveEventArgs are both now called IDropBaseEventArgs.
  • Breaking Change Interfaces IgxDropEventArgs is renamed to IDropDroppedEventArgs.
  • Breaking Change Outputs enter, over, leave(former onEnter, onOver, onLeave) now have arguments of type IDropBaseEventArgs
  • Breaking Change Output dropped (former onDrop) now have arguments of type IDropDroppedEventArgs