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

• IgxDropDown

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

• igx-calendar:

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

• igxExpansionPanel:

  • component added. igxExpansionPanel provides a way to display more information after expanding an item, respectively show less after collapsing it. For more detailed information see the official documentation.

• IgxList:

  • the control now supports ng-templates which are shown "under" a list item when it is left or right panned. The templates are distinguished using the igxListItemLeftPanning and igxListItemRightPanning directives set on the templates.
  • the IgxList's onLeftPan and onRightPan events now have an argument of type IListItemPanningEventArgs (instead of IgxListItemComponent). The event argument has the following fields:
    • item of type IgxListItemComponent
    • direction of type IgxListPanState
    • keepItem of type boolean

• igxTooltip and igxTooltipTarget directives:

  • Added IgxTooltipDirective.
    • An element that uses the igxTooltip directive is used as a tooltip for a specific target (anchor).
    • Extends IgxToggleDirective.
    • Exported with the name tooltip.
  • Added IgxTooltipTargetDirective.
    • An element that uses the igxTooltipTarget directive is used as a target (anchor) for a specific tooltip.
    • Extends IgxToggleActionDirective.
    • Exported with the name tooltipTarget.
  • Both new directives are used in combination to set a tooltip to an element. For more detailed information, see the README.

• igxToggle:

  • Introduced reposition method which allows a user to force toggle to reposition according its position strategy.

• IgxDrag and IgxDrop directives available.

  • IgxDrag allows any kind of element to be moved/dragged around the page without changing its position in the DOM. Supports Desktop/Mixed/Touch environments.
  • IgxDrop allows any element to act as a drop area where any igxDrag element can be dragged into and dropped. Includes default logic that moves the dropped element from its original position to a child of the igxDrop element.
  • Combined they provide a way to move elements around the page by dragging them. For more detail see the README.

• IgxGrid keyboard navigation
  When you focus a specific cell and press one of the following key combinations, the described behaviour is now performed:

  • Ctrl + Arrow Key Up - navigates to the first cell in the current column;
  • Ctrl + Arrow Down - navigates to the last cell in the current column;
  • Home - provide the same behavior as Ctrl + Arrow Left - navigates to the first cell from the current row;
  • End - provide the same behavior as Ctrl + Arrow Right - navigates to the last cell from the current row;
  • Ctrl + Home - navigates to the first cell in the grid;
  • Ctrl + End - navigates to the last cell in the grid;
  • Tab - sequentially move the focus over the next cell on the row and if the last cell is reached move to next row. If next row is group row the whole row is focused, if it is data row, move focus over the first cell;
  • Shift + Tab - sequentially move focus to the previous cell on the row, if the first cell is reached move the focus to the previous row. If previous row is group row focus the whole row or if it is data row, focus the last cell of the row;
  • Space over Cell - if the row is selectable, on keydown space triggers row selection
  • Arrow Left over GroupRow - collapse the group row content if the row is not already collapsed;
  • Arrow Right over GroupRow - expand the group row content if the row is not already expanded;
  • on mouse wheel the focused element is blurred;
  • Breaking change space handler for the group row has been removed; so Space does not toggle the group row;
  • Breaking change cell selection is preserved when the focus is moved to group row.
  • Introduced onFocusChange event. The event is cancelable and output argument from type IFocusChangeEventArgs;
  • For more detailed information see the official keyboard navigation specification.