Ignite UI for Angular 11.1.0 Release

It is time for our first major release of Ignite UI for Angular in 2021 - Ignite UI for Angular 11.1.0! In the past two months we have focused our efforts in addressing feature requests and enhancements logged in our GitHub repository by you. Being the best Angular UI toolkit, takes continuous improvement efforts, which is our top priority. Let’s see what we’ve prepared for you with this release.

Angular Grids: Grid, Tree Grid and Hierarchical Grid

Cascade selection in Angular tree grid

We have added cascading selection mode in the tree grid that allows you to select all the children recursively by selecting their parent. To enable cascading row selection in the igx-tree-grid just set the rowSelection property to "multipleCascade". This will display a row selector field on each row and in the Tree Grid header. You can find more in Ignite UI for Angular Documentation.

Currency type column

Ignite UI for Angular Grid provides a default handling for columns of type number, string, date, boolean, currency and percent. Column types are an easy way for you to adjust the igx-grid column appearance and behavior based on the type of data that the column is populated with. The default currency column template will show a numeric value with currency symbol that would be either prefixed or suffixed depending on locale. Both currency symbol location and number value formatting is based on the provided application LOCALE_ID.

Percent type column

Similar to the currency type column, the percent type column's default template tells the grid to the display percentages based on the underlying data numeric values. By default the percent type column uses the Angular percent pipe to format the data values. This means that by default the displayed cell value is a multiplied result by display factor of '100' - for example, as the default factor is 100 and the "value" passed to the cell is 0.123, then the displayed cell value will be "12.3%".

When it comes to cell editing, the value will be the same as the data source value - the display factor is '1'. Upon editing of the cell a preview of the percent value will be shown as a suffix element. For example, while editing '0.0547' the preview element will show '5.47%'.

Formatted Values Filtering Strategy for Angular Grid Excel Style Filter

By default, the Grid component filters the data based on the underlying data values and not based on the displayed formatter cell values, and that could confusing for the end user when there's formatted values in the grid. Now you can configure the Angular data grid filtering to apply filters on the data based on the formatted values using the FormattedValuesFilteringStrategy. 

 Unified exit editing grid capabilities table

Previously, there were inconsistencies between interactions which end the grids edit mode before values have been committed. Some interactions were committing the intermediate values, while others were discarding them. Now, all interactions, except resizing a column, end the editing and discard the intermediate values. Should the intermediate values be committed, all you need to do as a developer is to handle the edit"-ing" event (adding, deleting, editing, etc.) and commit the intermediate values via API call.

Angular Components

 Carousel Accessibility

We have introduced improvements to the carousel aria roles in order to improve compliance with WAI-ARIA guidelines.

Design & Theming

 File Type Input

Ignite UI for Angular now provides styling for the input of type="file" and it supports all the input group types and themes.

 Change theme in runtime

Here it is the complete Ignite UI for Angular Change Log for 11.1.0

New Features

• IgxDropDown

  • The igx-drop-down-item now allows for igxPrefix, igxSuffix and igx-divider directives to be passed as ng-content and they will be renderer accordingly in the item's content.

• IgxGrid

  • Added support for exporting grouped data.

• IgxTreeGrid

  • Added multipleCascade row selection mode. In this mode, selecting a record results in the selection of all its children recursively. When only some children are selected, their parent's checkbox is in an indeterminate state.

    <igx-tree-grid[rowSelection]="'multipleCascade'"></igx-tree-grid>

• IgxGrid, IgxTreeGrid, IgxHierarchicalGrid

  • Support for currency type columns is added in the grid.
  • Support for percent type columns is added in the grid.
  • Added support for filtering based on the formatted cell values using the FormattedValuesFilteringStrategy for IgxGrid/IgxHierarchicalGrid and TreeGridFormattedValuesFilteringStrategy for IgxTreeGrid.

• IgxPaginator

  • paging and pagingDone events are now emitted.

• IgxInput now supports type="file" and its styling upon all themes. Note: validation of file type input is not yet supported.

• igxSplitter now has the following additional outputs:

  • resizeStart - Emits when pane resizing starts.
  • resizing- Emits while panes are being resized.
  • resizeEnd - Emits when pane resizing ends.

  All emit with the two panes affected by the resize operation as arguments.

General

• Breaking Change - Many outputs are renamed with the introduction of new rules in Ignite UI for Angular's naming convention. Please, ensure that when you update to 11.1 you do so through

  ng update igniteui-angular
  

  or execute the update migrations manually afterwards

  ng update igniteui-angular --migrate-only
  

  This will ensure your application is updated to use the new output names.
• IgxCheckbox, IgxRadio, IgxSwitch now follow the Google Material spec for focus behavior. See checkbox, radio, and switch.
• IgxDialog
  • The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it.
• IgxCalendar
  • Breaking Change
  • A new string enumeration IgxCalendarView is exported. Either the new one or the current CalendarView can be used. CalendarView will be deprecated in a future release.
  • onSelection is now selected
  • onViewChanging is now viewChanging
  • onDateSelection is now dateSelection
  • onYearSelection is now yearSelection
  • onMonthSelection is now monthSelection
• IgxYearsViewComponent
  • Breaking Change
  • onSelection is now selected
  • onYearSelection is now yearSelection
• IgxDaysViewComponent
  • Breaking Change
  • onDateSelection is now dateSelection
  • onViewChanging is now viewChanging
• IgxMonthsViewComponent
  • Breaking Change
  • onSelection is now selected
  • onMonthSelection is now monthSelection
• IgxMonthPickerComponent
  • Breaking Change
  • onSelection is now selected
• IgxRadioGroup
  • Added new property alignment that determines the radio group alignment. Available options are horizontal (default) and vertical.
• IgxDialog
  • Added new onOpened and onClosed events.
• IgxIcon
  • Deprecated - The color input property has been deprecated.
  • Renamed inputs isActive to active fontSet to family
• IgxToast
  • Breaking Change - show and hide methods have been deprecated. open and close should be used instead. onShowing,onShown,onHiding and onHiden events have been deprecated. onOpening, onOpened, onClosing and onClosedshould be used instead.
• IgxInputGroup
  • Added new property theme that allows you to set the theme explicitly and at runtime.
• IgxSnackbar
  • show and hide methods have been deprecated. open and close should be used instead.
• IgxSplitter
  • Breaking Change - the onToggle output is deprecated. A new output is introduced to replace it - collapsedChange. This allows for the collapsed state to be two-way bindable using the syntax [(collapsed)]="paneCollapse"
• IgxChip
  • Breaking Change - The following outputs are renamed:
    • onMoveStart to moveStart
    • onMoveEnd to moveEnd
    • onRemove to remove
    • onClick to chipClick
    • onSelection to selectedChanging
    • onSelectionDone to selectedChanged
    • onKeyDown to keyDown
    • onDragEnter to dragEnter
• IgxChipArea
  • Breaking Change - The following outputs are renamed:
    • onReorder to reorder
    • onSelection to selectionChange
    • onMoveStart to moveStart
    • onMoveEnd to moveEnd
• IgxGrid, IgxHierarchicalGrid, IgxTreeGrid
  • Added new property selectRowOnClick that determines whether clicking over a row will change its selection state or not. Set to true by default.
  • GridPagingMode enum members rename - local to Local and remote to Remote. Example: GridPagingMode.Local.
  • The following new events are introduced: sorting, filtering, columnPinned, columnVisibilityChanging.
  • Behavioral Change -
    • onColumnPinning to emit IPinColumnCancellableEventArgs instead of IPinColumnEventArgs.
  • Breaking Change:
    • onPagingDone output is removed. Use the paging and pagingDone outputs exposed by the IgxPaginator.
    • page, perPage, paginate, nextPage, previousPage and totalPages in the grids are deprecated and will be removed. Use the corresponding IgxPaginator outputs/inputs. When using an external paginator, take care to provide the corresponding slice of data. See Paging with Custom Template
• IgxButton
  • IgxIcon(s) placed in a button now include margin if there are one or more sibling elements to give them some breathing room. The amount of margin applied depends on the display density of the button.
• IgxListComponent
  • Breaking Change - The following outputs are renamed:
    • onLeftPan to leftPan
    • onRightPan to rightPan
    • onPanStateChange to panStateChange
    • onItemClicked to itemClicked
• IgxNavbarComponent
  • Breaking Change - The onAction output is renamed to action.
• IgxTabsComponent
  • Breaking Change - The following outputs are renamed:
    • onTabItemSelected to tabItemSelected
    • onTabItemDeselected to tabItemDeselected
• IgxTooltipTargetDirective
  • Breaking Change - The following outputs are renamed:
    • onTooltipShow to tooltipShow
    • onTooltipHide to tooltipHide
• IgxBaseExporter, IgxExcelExporterService, IgxCsvExporterService
  • Breaking Change - The following outputs are renamed:
    • onColumnExport to columnExporting
    • onRowExport to rowExporting
    • onExportEnded to exportEnded

In 2021, \we look forward to more exciting new releases! We want to take this opportunity to thank all of you, our customers, and partners, for your feedback and ideas which help us to make Ignite UI for Angular the best Angular toolkit on the market!  

Follow us on Medium and stay up-to-date with the latest Angular-related projects that we are working on. Give us a star on GitHub and help us to continue to improve our product by addressing any concerns, questions or feature requests in the issues section.  We will continue to do our best to constantly improve our product experience to meet all your needs and build apps with ease.