7.0.1

7.0.1

Bug fixes

• Removed the GridHammerConfig provider which broke touch events for other components. (Fixed #3185, Reopens #2538)

6.2.2

6.2.2

• igx-checkbox:
  • Added a new input property - disableTransitions. It allows disabling all CSS transitions on the igx-checkbox component for performance optimization.

Bug fixes

• Removed the GridHammerConfig provider which broke touch events for other components. (Fixed #3185, Reopens #2538)

7.0.0

7.0.0

• Updated package dependencies to Angular 7 (#3000)
• Themes: Add dark schemas and mixins (PR #3025)

6.2.1

6.2.1

Features

• igxGrid, igxChip: Add display density DI token to igxGrid and igxChip (#2804)
• igxGrid
  • Quick filter auto close (#2979)
  • Group By: Added title to chip in Group By area (#3035)
  • Improve UX for boolean and date columns, (#3092)
• igxCombo:
  • Added a new input property - displayDensity. It allows configuring the displayDensity of the combo's value and search inputs. (PR #3007)
• igxDropDown
  • Added a new property maxHeight, defining the max height of the drop down. (#3001)
• Added migrations for Sass theme properties changes in 6.2.0 (#2994)
• Themes
  • Introducing schemas for easier bootstrapping of component themes.
  • Breaking change removed $variant from igx-checkbox-theme, igx-ripple-theme, igx-switch-theme, igx-input-group-theme, igx-slider-theme, and igx-tooltip-theme. Use the $schema prop, now available on all component themes to change the look for a specific theme. See the Theming documentation to learn more.

Bug fixes

• igxGrid
  • Filtering condition icon is not updated for boolean columns (#2936)
  • Batch editing: Updating a cell with a value that evaluates to false does not mark it as dirty (#2940)
  • Filtering input accepts value from calendar for unary conditions (#2937)
  • When a number filter's value is deleted the grid is not refreshed (#2945)
  • Improve keyboard navigation in filtering (#2951, #2941)
  • Group By: Alt+ Arrow left/Right keys should not toggle the group row (#2950)
  • Multi Column Header can be grouped (#2944)
  • Group By: groupsRecords is not updated yet at the time of onGroupingDone event. (#2967)
  • Paging: Blank space in rows area after vertical scrolling and navigating to next page (#2957)
  • When date or boolean cell is in edit mode and press arrowUp or arrowDown key the page is scrolled (#2507)
  • When deleting a row the Row Editing dialog should be closed (#2977)
  • Group header with columns which width is defined as number throws an exception (#3020)
  • Refactor header and filter cell components, Closes #2972, #2926, #2923, #2917, #2783, #3027, #2938
  • Filter's UI dropdown is hidden under the bottom level of the grid (#2928)
  • Cell is not editable on iOS (#2538)
• IgxTreeGrid
  • Cell selection wrong behavior when collapsing rows (#2935)
• igxCombo
  • Keyboard doesn't scroll virtualized items (#2999)
• igxDatePicker
  • Error emitting when value property is initialized with empty string. (#3021)
• igxOverlay
  • Drop-down flickers in IE and EDGE (#2867)
• igxTabs
  • Tabs don't not handle width change (#3030)
• igxCalendar
  • make all css class names unique (#2287)
• Fixed runtime errors when using the package in applications targeting es2015(es6) and newer (#3011)

6.1.9

6.1.9

General

• sortStrategy input exposed to provide custom sort strategy for the IgxColumnComponent. The custom strategy should implement the ISortingStrategy interface, or can extend the base DefaultSortingStrategy class and override all or some of its public/protected members.
• The previously optional ignoreCase and strategy of the ISortingExpression interface are no longer optional. In order to use our default sorting strategy in expressions built programmatically, you need to pass DefaultSortingStrategy.instance() or any implementation of the ISortingStrategy interface.
• groupingComparer input exposed to provide custom grouping compare function for the IgxColumnComponent. The function receives two values and should return 0 if they are to considered members of the same group.

Bug Fixes

• When selection type is range and select date range with invalid date the browser is not responding #2617
• Scrolling igxGrid using touchpad on Mac scrolls the page #2873
• Header checkbox is not updated after deselect and select a filtered-in row #2793
• [Grid] Hiding all columns when row selectors are enabled looks broken #2862
• Keyboard navigation doesn't work if there is no selected date #2828

6.2.0

6.2.0

• Updated typography following the Material guidelines. Type system is now also optional and can be applied via class to the desired containers. #2112

  • Breaking change: Applications using Ignite UI for Angular now require the igx-typography class to be applied on wrapping element, like the body element for instance.

• Display density can be specified by using the injection token DisplayDensityToken and providing a value (comfortable, cosy or compact) on an application or a component level.

  Setting display density on a component level:

  @Component({
  ...
  providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
  })

• igx-input-group

  • The igx-input-group control's display density can be explicitly set by using the displayDensity input.

  <igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

• igx-drop-down:

  • Added a new boolean argument cancel to the onSelection ISelectionEventArgs. Its default value is false, in case it is set to true, the drop down selection is invalidated.

• igxIcon:

  • Breaking change glyphName property is removed from IgxIconComponent. For Material icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome icons should use the name property now.
  • Added support for custom SVG icons. Register the SVG icons with the IgxIconService and use IgxIconComponent's name and fontSet properties to visualize the icon.

• Transaction Provider - TransactionService is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
  For more detailed information, see the README.

• igxTreeGrid:

  • New IgxTreeGridComponent added.
  • The igxTreeGrid is used to display and manipulate hierarchical data with consistent schema, formatted as a table and provides a line of advanced features such as sorting, filtering, editing, column pinning, column moving, column hiding, paging and others.
  • The igxTreeGrid provides two ways of defining the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.
  • For more details on using the igxTreeGrid, take a look at the official documentation.

• igxGrid:

  • Breaking change onGroupingDone - The array of ISortingExpression can now be accessed through the expressions event property. Two new properties have been added to the event arguments - groupedColumns and ungroupedColumns. They provide references to arrays of IgxColumnComponent that hold the columns which have changed their state because of the last grouping/ungrouping operation.

  • Breaking change onEditDone event is renamed to onCellEdit and new cell editing events are introduced: onCellEditEnter and onCellEditCancel. When row editing is enabled, the corresponding events are emitted by the grid - onRowEditEnter, onRowEdit, onRowEditCancel. All these events have arguments that are using the IGridEditEventArgs interface.

  • Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.

    <igx-grid [data]="data" [rowEditable]="true">
        <igx-column field="ProductName"></igx-column>
        <igx-column field="ReleaseDate"></igx-column>
    </igx-grid>

  • Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

    @Component({
        providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
        selector: "app-grid-with-transactions",
        template: "<ng-content></ng-content>"
    })
    export class GridWithTransactionsComponent { }

  • A new boolean hideGroupedColumns input controls whether the grouped columns should be hidden as well (defaults to false).

  • Breaking change cellClasses input on IgxColumnComponent now accepts an object literal to allow conditional cell styling.

  • Exposing a mechanism for cells to grow according to their content.

  • sortStrategy input exposed to provide custom sort strategy for the IgxColumnComponent. The custom strategy should implement the ISortingStrategy interface, or can extend the base SortingStrategy class and override all or some of its public/protected members.

  • New quick filtering functionality is implemented. Filtering icon is removed from column header and a filtering row is introduced in the grid's header.

• igxFor

  • Added support for variable heights.

• igx-datePicker selector is deprecated. Use igx-date-picker selector instead.

• igxOverlay:

  • OverlaySettings now also accepts an optional outlet to specify the container where the overlay should be attached.
  • when show and hide methods are called onAnimation event fires. In the arguments of this event there is a reference to the animationPlayer, animationType (either open or close) and to the overlay id.
  • if you call show/hide methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.

• igxToggleAction new outlet input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet.

• IgxOverlayOutlet directive introduced to mark an element as an igxOverlay outlet container. ReadMe

• igxButtonGroup

  • Added the ability to define buttons directly in the template

• igx-time-picker:

  • igxTimePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxTimePickerComponent's input group is retemplated.

• igx-datePicker:

  • igxDatePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxDatePickerComponent's input group is retemplated.
  • Introduced disabledDates. This property is exposed from the igx-calendar component.
  • Introduced specialDates. This property is exposed from the igx-calendar component.
  • Introduced deselectDate method added that deselects the calendar date.

• IgxTextHighlightDirective: The highlight method now has a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the group's value.
  • If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxGrid: The findNext and findPrev methods now have a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
  • If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxChip

  • Introduced event argument types to all EventEmitter @Outputs.
  • Breaking change onSelection's EventEmitter interface property nextStatus is renamed to selected.
  • Breaking change Move the location of where the chip suffix is positioned. Now it is between the content and the remove button making the button last element if visible by default.
  • Breaking change Remove the chip connector rendered when using the igxConnector directive that is also removed.
  • Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
    and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.
  • Added data input for storing any data related to the chip itself.
  • Added select icon with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
  • Added selectIcon input to set custom template for the select icon.
  • Update chip styling to match Material Design guidelines.
  • Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
  • Rework of the remove button rendered and now has the ability to customize its icon while retaining the chip Material Design.
  • Added removeIcon input so a custom template cane be set for the remove button icon.

• IgxChipArea

  • Introduced event argument types to all EventEmitter @Outputs.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.

• IgxCombo

  • Added the foll...

6.2.0 RC 2

6.2.0 RC 2

• Display density can be specified by using the injection token DisplayDensityToken and providing a value (comfortable, cosy or compact) on an application or a component level.

  Setting display density on a component level:

  @Component({
  ...
  providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
  })

• igx-input-group

  • The igx-input-group control's display density can be explicitly set by using the displayDensity input.

  <igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

• igx-drop-down:

  • Added a new boolean argument cancel to the onSelection ISelectionEventArgs. Its default value is false, in case it is set to true, the drop down selection is invalidated.

• igxIcon:

  • Breaking change glyphName property is removed from IgxIconComponent. For Material icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome icons should use the name property now.
  • Added support for custom SVG icons. Register the SVG icons with the IgxIconService and use IgxIconComponent's name and fontSet properties to visualize the icon.

• Transaction Provider - TransactionService is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
  For more detailed information, see the README.

• igxTreeGrid:

  • New IgxTreeGridComponent added.
  • The igxTreeGrid is used to display and manipulate hierarchical data with consistent schema, formatted as a table and provides a line of advanced features such as sorting, filtering, editing, column pinning, column moving, column hiding, paging and others.
  • The igxTreeGrid provides two ways of defining the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.
  • For more details on using the igxTreeGrid, take a look at the official documentation.

• igxGrid:

  • Breaking change onGroupingDone - The array of ISortingExpression can now be accessed through the expressions event property. Two new properties have been added to the event arguments - groupedColumns and ungroupedColumns. They provide references to arrays of IgxColumnComponent that hold the columns which have changed their state because of the last grouping/ungrouping operation.

  • Breaking change onEditDone event is renamed to onCellEdit and new cell editing events are introduced: onCellEditEnter and onCellEditCancel. When row editing is enabled, the corresponding events are emitted by the grid - onRowEditEnter, onRowEdit, onRowEditCancel. All these events have arguments that are using the IGridEditEventArgs interface.

  • Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.

    <igx-grid [data]="data" [rowEditable]="true">
        <igx-column field="ProductName"></igx-column>
        <igx-column field="ReleaseDate"></igx-column>
    </igx-grid>

  • Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

    @Component({
        providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
        selector: "app-grid-with-transactions",
        template: "<ng-content></ng-content>"
    })
    export class GridWithTransactionsComponent { }

  • A new boolean hideGroupedColumns input controls whether the grouped columns should be hidden as well (defaults to false).

  • Breaking change cellClasses input on IgxColumnComponent now accepts an object literal to allow conditional cell styling.

  • Exposing a mechanism for cells to grow according to their content.

  • sortStrategy input exposed to provide custom sort strategy for the IgxColumnComponent. The custom strategy should implement the ISortingStrategy interface, or can extend the base SortingStrategy class and override all or some of its public/protected members.

  • New quick filtering functionality is implemented. Filtering icon is removed from column header and a filtering row is introduced in the grid's header.

• igxFor

  • Added support for variable heights.

• igx-datePicker selector is deprecated. Use igx-date-picker selector instead.

• igxOverlay:

  • OverlaySettings now also accepts an optional outlet to specify the container where the overlay should be attached.
  • when show and hide methods are called onAnimation event fires. In the arguments of this event there is a reference to the animationPlayer, animationType (either open or close) and to the overlay id.
  • if you call show/hide methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.

• igxToggleAction new outlet input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet.

• IgxOverlayOutlet directive introduced to mark an element as an igxOverlay outlet container. ReadMe

• igxButtonGroup

  • Added the ability to define buttons directly in the template

• igx-time-picker:

  • igxTimePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxTimePickerComponent's input group is retemplated.

• igx-datePicker:

  • igxDatePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxDatePickerComponent's input group is retemplated.
  • Introduced disabledDates. This property is exposed from the igx-calendar component.
  • Introduced specialDates. This property is exposed from the igx-calendar component.
  • Introduced deselectDate method added that deselects the calendar date.

• IgxTextHighlightDirective: The highlight method now has a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the group's value.
  • If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxGrid: The findNext and findPrev methods now have a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
  • If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxChip

  • Introduced event argument types to all EventEmitter @Outputs.
  • Breaking change onSelection's EventEmitter interface property nextStatus is renamed to selected.
  • Breaking change Move the location of where the chip suffix is positioned. Now it is between the content and the remove button making the button last element if visible by default.
  • Breaking change Remove the chip connector rendered when using the igxConnector directive that is also removed.
  • Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
    and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.
  • Added data input for storing any data related to the chip itself.
  • Added select icon with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
  • Added selectIcon input to set custom template for the select icon.
  • Update chip styling to match Material Design guidelines.
  • Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
  • Rework of the remove button rendered and now has the ability to customize its icon while retaining the chip Material Design.
  • Added removeIcon input so a custom template cane be set for the remove button icon.

• IgxChipArea

  • Introduced event argument types to all EventEmitter @Outputs.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.

• IgxCombo

  • Added the following directives for TemplateRef assignment for combo templates (item, footer, etc.):
    • Added IgxComboItemDirective. Use [igxComboItem] in markup to assing a TemplateRef to combo.itemTemplate.
    • Added IgxComboHeaderDirective. Use [igxComboHeader] in markup to assing a TemplateRef to combo.headerTemplate.
    • Added IgxComboFooterDirective. ...

6.2.0 RC 1

6.2.0 RC 1

• Display density can be specified by using the injection token DisplayDensityToken and providing a value (comfortable, cosy or compact) on an application or a component level.

  Setting display density on a component level:

  @Component({
  ...
  providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
  })

• igx-input-group

  • The igx-input-group control's display density can be explicitly set by using the displayDensity input.

  <igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

• igx-drop-down:

  • Added a new boolean argument cancel to the onSelection ISelectionEventArgs. Its default value is false, in case it is set to true, the drop down selection is invalidated.

• igxIcon:

  • Breaking change glyphName property is removed from IgxIconComponent. For Material icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome icons should use the name property now.
  • Added support for custom SVG icons. Register the SVG icons with the IgxIconService and use IgxIconComponent's name and fontSet properties to visualize the icon.

• Transaction Provider - TransactionService is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
  For more detailed information, see the README.

• igxTreeGrid:

  • New IgxTreeGridComponent added.
  • The igxTreeGrid is used to display and manipulate hierarchical data with consistent schema, formatted as a table and provides a line of advanced features such as sorting, filtering, editing, column pinning, column moving, column hiding, paging and others.
  • The igxTreeGrid provides two ways of defining the relations among our data objects - by using a child collection for every data object or by using primary and foreign keys for every data object.
  • For more details on using the igxTreeGrid, take a look at the official documentation.

• igxGrid:

  • Breaking change onGroupingDone - The array of ISortingExpression can now be accessed through the expressions event property. Two new properties have been added to the event arguments - groupedColumns and ungroupedColumns. They provide references to arrays of IgxColumnComponent that hold the columns which have changed their state because of the last grouping/ungrouping operation.

  • Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.

    <igx-grid [data]="data" [rowEditable]="true">
        <igx-column field="ProductName"></igx-column>
        <igx-column field="ReleaseDate"></igx-column>
    </igx-grid>

  • Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

    @Component({
        providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
        selector: "app-grid-with-transactions",
        template: "<ng-content></ng-content>"
    })
    export class GridWithTransactionsComponent { }

  • A new boolean hideGroupedColumns input controls whether the grouped columns should be hidden as well (defaults to false).

  • Breaking change cellClasses input on IgxColumnComponent now accepts an object literal to allow conditional cell styling.

  • Exposing a mechanism for cells to grow according to their content.

  • sortStrategy input exposed to provide custom sort strategy for the IgxColumnComponent. The custom strategy should implement the ISortingStrategy interface, or can extend the base SortingStrategy class and override all or some of its public/protected members.

  • New quick filtering functionality is implemented. Filtering icon is removed from column header and a filtering row is introduced in the grid's header.

• igxFor

  • Added support for variable heights.

• igx-datePicker selector is deprecated. Use igx-date-picker selector instead.

• igxOverlay:

  • OverlaySettings now also accepts an optional outlet to specify the container where the overlay should be attached.
  • when show and hide methods are called onAnimation event fires. In the arguments of this event there is a reference to the animationPlayer, animationType (either open or close) and to the overlay id.
  • if you call show/hide methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.

• igxToggleAction new outlet input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet.

• IgxOverlayOutlet directive introduced to mark an element as an igxOverlay outlet container. ReadMe

• igxButtonGroup

  • Added the ability to define buttons directly in the template

• igx-time-picker:

  • igxTimePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxTimePickerComponent's input group is retemplated.

• igx-datePicker:

  • igxDatePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxDatePickerComponent's input group is retemplated.
  • Introduced disabledDates. This property is exposed from the igx-calendar component.
  • Introduced specialDates. This property is exposed from the igx-calendar component.
  • Introduced deselectDate method added that deselects the calendar date.

• IgxTextHighlightDirective: The highlight method now has a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the group's value.
  • If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxGrid: The findNext and findPrev methods now have a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
  • If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxChip

  • Introduced event argument types to all EventEmitter @Outputs.
  • Breaking change onSelection's EventEmitter interface property nextStatus is renamed to selected.
  • Breaking change Move the location of where the chip suffix is positioned. Now it is between the content and the remove button making the button last element if visible by default.
  • Breaking change Remove the chip connector rendered when using the igxConnector directive that is also removed.
  • Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
    and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.
  • Added data input for storing any data related to the chip itself.
  • Added select icon with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
  • Added selectIcon input to set custom template for the select icon.
  • Update chip styling to match Material Design guidelines.
  • Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
  • Rework of the remove button rendered and now has the ability to customize its icon while retaining the chip Material Design.
  • Added removeIcon input so a custom template cane be set for the remove button icon.

• IgxChipArea

  • Introduced event argument types to all EventEmitter @Outputs.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.

• IgxCombo

  • Added the following directives for TemplateRef assignment for combo templates (item, footer, etc.):
    • Added IgxComboItemDirective. Use [igxComboItem] in markup to assing a TemplateRef to combo.itemTemplate.
    • Added IgxComboHeaderDirective. Use [igxComboHeader] in markup to assing a TemplateRef to combo.headerTemplate.
    • Added IgxComboFooterDirective. Use [igxComboFooter] in markup to assing a TemplateRef to combo.footerTemplate.
    • Added IgxComboEmptyDirective. Use [igxComboEmpty] in markup to assing a TemplateRef to combo.emptyTemplate.
    • Added IgxComboAddItemirective. Use [igxComboAddItem] in markup to assing a TemplateRef to combo.addItemTemplate.
    • Added `IgxComboHeaderIte...

6.2.0 Beta 7

6.2.0 Beta 7

• Display density can be specified by using the injection token DisplayDensityToken and providing a value (comfortable, cosy or compact) on an application or a component level.

  Setting display density on a component level:

  @Component({
  ...
  providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
  })

• igx-input-group

  • The igx-input-group control's display density can be explicitly set by using the displayDensity input.

  <igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

• igx-drop-down:

  • Added a new boolean argument cancel to the onSelection ISelectionEventArgs. Its default value is false, in case it is set to true, the drop down selection is invalidated.

• igxIcon:

  • Breaking change glyphName property is removed from IgxIconComponent. For Material icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome icons should use the name property now.
  • Added support for custom SVG icons. Register the SVG icons with the IgxIconService and use IgxIconComponent's name and fontSet properties to visualize the icon.

• Transaction Provider - TransactionService is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
  For more detailed information, see the README.

• igxGrid:

  • Breaking change onGroupingDone - The array of ISortingExpression can now be accessed through the expressions event property. Two new properties have been added to the event arguments - groupedColumns and ungroupedColumns. They provide references to arrays of IgxColumnComponent that hold the columns which have changed their state because of the last grouping/ungrouping operation.

  • Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.

    <igx-grid [data]="data" [rowEditable]="true">
        <igx-column field="ProductName"></igx-column>
        <igx-column field="ReleaseDate"></igx-column>
    </igx-grid>

  • Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

    @Component({
        providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
        selector: "app-grid-with-transactions",
        template: "<ng-content></ng-content>"
    })
    export class GridWithTransactionsComponent { }

  • A new boolean hideGroupedColumns input controls whether the grouped columns should be hidden as well (defaults to false).

  • Breaking change cellClasses input on IgxColumnComponent now accepts an object literal to allow conditional cell styling.

  • Exposing a mechanism for cells to grow according to their content.

• igxFor

  • Added support for variable heights.

• igx-datePicker selector is deprecated. Use igx-date-picker selector instead.

• igxOverlay:

  • OverlaySettings now also accepts an optional outlet to specify the container where the overlay should be attached.
  • when show and hide methods are called onAnimation event fires. In the arguments of this event there is a reference to the animationPlayer, animationType (either open or close) and to the overlay id.
  • if you call show/hide methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.

• igxToggleAction new outlet input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet.

• IgxOverlayOutlet directive introduced to mark an element as an igxOverlay outlet container. ReadMe

• igxButtonGroup

  • Added the ability to define buttons directly in the template

• igx-time-picker:

  • igxTimePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxTimePickerComponent's input group is retemplated.

• igx-datePicker:

  • igxDatePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxDatePickerComponent's input group is retemplated.
  • Introduced disabledDates. This property is exposed from the igx-calendar component.
  • Introduced specialDates. This property is exposed from the igx-calendar component.
  • Introduced deselectDate method added that deselects the calendar date.

• IgxTextHighlightDirective: The highlight method now has a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the group's value.
  • If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxGrid: The findNext and findPrev methods now have a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
  • If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxChip

  • Introduced event argument types to all EventEmitter @Outputs.
  • Breaking change onSelection's EventEmitter interface property nextStatus is renamed to selected.
  • Breaking change Move the location of where the chip suffix is positioned. Now it is between the content and the remove button making the button last element if visible by default.
  • Breaking change Remove the chip connector rendered when using the igxConnector directive that is also removed.
  • Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
    and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.
  • Added data input for storing any data related to the chip itself.
  • Added select icon with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
  • Added selectIcon input to set custom template for the select icon.
  • Update chip styling to match Material Design guidelines.
  • Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
  • Rework of the remove button rendered and now has the ability to customize its icon while retaining the chip Material Design.
  • Added removeIcon input so a custom template cane be set for the remove button icon.

• IgxChipArea

  • Introduced event argument types to all EventEmitter @Outputs.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.

• IgxCombo

  • Added the following directives for TemplateRef assignment for combo templates (item, footer, etc.):
    • Added IgxComboItemDirective. Use [igxComboItem] in markup to assing a TemplateRef to combo.itemTemplate.
    • Added IgxComboHeaderDirective. Use [igxComboHeader] in markup to assing a TemplateRef to combo.headerTemplate.
    • Added IgxComboFooterDirective. Use [igxComboFooter] in markup to assing a TemplateRef to combo.footerTemplate.
    • Added IgxComboEmptyDirective. Use [igxComboEmpty] in markup to assing a TemplateRef to combo.emptyTemplate.
    • Added IgxComboAddItemirective. Use [igxComboAddItem] in markup to assing a TemplateRef to combo.addItemTemplate.
    • Added IgxComboHeaderItemDirective. Use [igxComboHeaderItem] in markup to assing a TemplateRef to combo.headerItemTemplate.
  • Breaking change Assigning templates with the following template ref variables is now deprecated in favor of the new directives:
    #itemTemplate, #headerTemplate, #footerTemplate, #emptyTemplate, #addItemTemplate, #headerItemTemplate.
  • Breaking change height property is removed. In the future IgxInputGroup will expose an option that allows custom sizing and then IgxCombo will use the same functionality for proper styling and better consistency.

• IgxDropDown

  • Breaking change allowItemsFocus default value is changed to false.
  • Added value input to IgxDropDownItemComponent definition. The property allows data to be bound to a drop-down item so it can more easily be retrieved (e.g. on selection)

• igx-calendar:

  • Introduced disabledDates property which allows a user to disable dates based on various rules: before or after a date, weekends, workdays, specific dates and ranges. The disabled dates cannot be selected and have a distinguishable style.
    ...

6.2.0 Beta 6

6.2.0 Beta 6

• Display density can be specified by using the injection token DisplayDensityToken and providing a value (comfortable, cosy or compact) on an application or a component level.

  Setting display density on a component level:

  @Component({
  ...
  providers: [{ provide: DisplayDensityToken, useValue: { displayDensity: DisplayDensity.compact} }]
  })

• igx-input-group

  • The igx-input-group control's display density can be explicitly set by using the displayDensity input.

  <igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>

• igx-drop-down:

  • Added a new boolean argument cancel to the onSelection ISelectionEventArgs. Its default value is false, in case it is set to true, the drop down selection is invalidated.

• igxIcon:

  • Breaking change glyphName property is removed from IgxIconComponent. For Material icons the icon name should be explicitly defined between the opening and closing tags. Font Awesome icons should use the name property now.
  • Added support for custom SVG icons. Register the SVG icons with the IgxIconService and use IgxIconComponent's name and fontSet properties to visualize the icon.

• Transaction Provider - TransactionService is an injectable middleware that a component can use to accumulate changes without affecting the underlying data. The provider exposes API to access, manipulate changes (undo and redo) and discard or commit all to the data.
  For more detailed information, see the README.

• igxGrid:

  • Row editing - allows modification of several cells in the row, before submitting, at once, all those changes to the grid's data source. Leverages the pending changes functionality of the new transaction provider.

    <igx-grid [data]="data" [rowEditable]="true">
        <igx-column field="ProductName"></igx-column>
        <igx-column field="ReleaseDate"></igx-column>
    </igx-grid>

  • Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.

    @Component({
        providers: [{ provide: IgxGridTransaction, useClass: IgxTransactionService }],
        selector: "app-grid-with-transactions",
        template: "<ng-content></ng-content>"
    })
    export class GridWithTransactionsComponent { }

  • A new boolean hideGroupedColumns input controls whether the grouped columns should be hidden as well (defaults to false).

  • Breaking change cellClasses input on IgxColumnComponent now accepts an object literal to allow conditional cell styling.

  • Exposing a mechanism for cells to grow according to their content.

• igxFor

  • Added support for variable heights.

• igx-datePicker selector is deprecated. Use igx-date-picker selector instead.

• igxOverlay:

  • OverlaySettings now also accepts an optional outlet to specify the container where the overlay should be attached.
  • when show and hide methods are called onAnimation event fires. In the arguments of this event there is a reference to the animationPlayer, animationType (either open or close) and to the overlay id.
  • if you call show/hide methods of overlay, while opening/closing animation is still ongoing, the animation will stop and respective open/close animation will start.

• igxToggleAction new outlet input controls the target overlay element should be attached. Provides a shortcut for overlaySettings.outlet.

• IgxOverlayOutlet directive introduced to mark an element as an igxOverlay outlet container. ReadMe

• igxButtonGroup

  • Added the ability to define buttons directly in the template

• igx-time-picker:

  • igxTimePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxTimePickerComponent's input group is retemplated.

• igx-datePicker:

  • igxDatePickerTemplate - new directive which should be applied on the child <ng-template> element when IgxDatePickerComponent's input group is retemplated.
  • Introduced disabledDates. This property is exposed from the igx-calendar component.
  • Introduced specialDates. This property is exposed from the igx-calendar component.
  • Introduced deselectDate method added that deselects the calendar date.

• IgxTextHighlightDirective: The highlight method now has a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the group's value.
  • If its value is true, the entire group's value should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxGrid: The findNext and findPrev methods now have a new optional parameter called exactMatch (defaults to false).

  • If its value is false, all occurrences of the search text will be highlighted in the grid's cells.
  • If its value is true, the entire value of each cell should equals the search text in order to be highlighted (caseSensitive argument is respected as well).

• IgxChip

  • Introduced event argument types to all EventEmitter @Outputs.
  • Breaking change onSelection's EventEmitter interface property nextStatus is renamed to selected.
  • Breaking change Move the location of where the chip suffix is positioned. Now it is between the content and the remove button making the button last element if visible by default.
  • Breaking change Remove the chip connector rendered when using the igxConnector directive that is also removed.
  • Breaking change The chip theme has been rewritten. Most theme input properties have been renamed for consistency
    and better legibility. New properties have been added. Please, refer to the updated igx-chip-theme documentation to see all updates.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.
  • Added data input for storing any data related to the chip itself.
  • Added select icon with show/hide animation to indicate when a chip is being selected with ability to customize it while retaining the chip Material Design styling.
  • Added selectIcon input to set custom template for the select icon.
  • Update chip styling to match Material Design guidelines.
  • Rework of the chip content styling so now by default text inside is styled to match the chip Material Design styling.
  • Rework of the remove button rendered and now has the ability to customize its icon while retaining the chip Material Design.
  • Added removeIcon input so a custom template cane be set for the remove button icon.

• IgxChipArea

  • Introduced event argument types to all EventEmitter @Outputs.
  • Exposed original event that is responsible for triggering any of the events. If triggered by the API it is by default null.

• IgxCombo

  • Added the following directives for TemplateRef assignment for combo templates (item, footer, etc.):
    • Added IgxComboItemDirective. Use [igxComboItem] in markup to assing a TemplateRef to combo.itemTemplate.
    • Added IgxComboHeaderDirective. Use [igxComboHeader] in markup to assing a TemplateRef to combo.headerTemplate.
    • Added IgxComboFooterDirective. Use [igxComboFooter] in markup to assing a TemplateRef to combo.footerTemplate.
    • Added IgxComboEmptyDirective. Use [igxComboEmpty] in markup to assing a TemplateRef to combo.emptyTemplate.
    • Added IgxComboAddItemirective. Use [igxComboAddItem] in markup to assing a TemplateRef to combo.addItemTemplate.
    • Added IgxComboHeaderItemDirective. Use [igxComboHeaderItem] in markup to assing a TemplateRef to combo.headerItemTemplate.
  • Breaking change Assigning templates with the following template ref variables is now deprecated in favor of the new directives:
    #itemTemplate, #headerTemplate, #footerTemplate, #emptyTemplate, #addItemTemplate, #headerItemTemplate.
  • Breaking change height property is removed. In the future IgxInputGroup will expose an option that allows custom sizing and then IgxCombo will use the same functionality for proper styling and better consistency.

• IgxDropDown

  • Breaking change allowItemsFocus default value is changed to false.
  • Added value input to IgxDropDownItemComponent definition. The property allows data to be bound to a drop-down item so it can more easily be retrieved (e.g. on selection)

• igx-calendar:

  • Introduced disabledDates property which allows a user to disable dates based on various rules: before or after a date, weekends, workdays, specific dates and ranges. The disabled dates cannot be selected and have a distinguishable style.
  • Introduced specialDates property which allows a user to mark dates as special. They can be set by using various rules. Their style is distinguishable.
  • Introduced deselectDate method added that deselects date(s) (based on the selection type)

• igxExpansionPanel:

  • component added. igxExpansionPanel provides a way to display more information after expanding an item, respectively sho...