Log in to like this post! Ignite UI for Angular 11.1.0 Release Radoslav Mirchev / Wednesday, February 17, 2021 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 The input group is a versatile component. It includes built-in styles and layouts for 4 different themes - Material, Bootstrap, Fluent, and our own Indigo Design. Before the Ignite UI for Angular 11.1.0 release, the input group implicitly styled itself based on the currently loaded CSS theme. Switching the theme stylesheet at run-time wouldn't update the layout and/or styles without reloading the page. With 11.1.0 we are introducing a new theme input property that allows you to set the theme of the input group declaratively at run-time. 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.