Ignite UI for Angular 10.1.0 Release

It has been two months since we released v10.0.0, and now we are excited to announce that we are ready with our next major release - Ignite UI for Angular 10.1.0! This release includes many of the features that our users have requested—more than 18 of them! And that’s not all, we have also added two new sample applications to our ASP.NET Core portfolio. Let’s see what we’ve prepared for you with this release.

New Angular Theme

Ignite UI for Angular now has a new theme based on our own design system - Indigo.Design theme. You can use one of the following mixins to include a dark or light indigo theme: igx-indigo-light-theme and igx-indigo-dark-theme.

We've also added two new palettes that go with the new theme, $light-indigo-palette and $dark-indigo-palette.

Angular Grids: IgxGrid, IgxTreeGrid and IgxHierarchicalGrid

 Sorting Indicator on all Grid components - Having a certain amount of sorted columns could be really confusing if there is no indication of the sorted order. The IgxGrid provides a solution to this problem by indicating the index of each sorted column.

 IgxGrid Hide the group area row  - showGroupArea input is added, which can be used to enable/disable the group area row.

 Manage summaries visibility on expand/collapse action - The showSummaryOnCollapse property is boolean. Its default value is set to false, which means that the summary row would be hidden when the group row is collapsed. If the property is set to true the summary row stays visible when group row is collapsed.

 Added support for binding columns to properties in nested data objects - The grid now supports binding through a "path" of properties in the data record. Data operations (filtering/sorting/updating/etc.) are supported for the nested properties.

 
interface AminoAcid {
    name: string;
    abbreviation: {
        short: string;
        long: string;
    }
    weight: {
        molecular: number;
        residue: number;
    }
    ...
}
..
<igx-column field="weight.molecular"></igx-column>
<igx-column field="weight.residue"></igx-column>

 IgxGrid default column display templates per-type Boolean - The grid now exposes a default handling for number, string, date and boolean column types. For example, the column will display check or close icon, instead of true/false by default, for boolean column type.

 IgxColumnActions - IgxColumnHiding and IgxColumnPinning components have been deprecated in favor of a component combining the their functionality - IgxColumnActions which is used with either of the new IgxColumnPinning and IgxColumnHiding directives that specify the action to be triggered through the UI.

 Added support for mixing px and % column widths - Also, we've added byHeader parameter to the autosize method which specifies if the autosizing should be based only on the header content width.

 Pre-select rows - The selectedRows() method is now an @Input property. Setting it to an array of Row IDs will update the grid's selection state, any previous selection will be cleared. Setting it to an empty array will clear the selection entirely.

 Exposed templates for all Excel-Style Filtering UI parts - If you want to further customize the Excel-style filter menu without disabling the column features you can use custom templates. The Excel-style filter menu provides two directives for templating:

• IgxExcelStyleColumnOperationsTemplateDirective - re-templates the area with all column operations like sorting, moving, pinning, etc.
• IgxExcelStyleFilterOperationsTemplateDirective - re-templates the area with all filter specific operations.

You can either re-template only one of those areas or both of them. You can put any custom content inside those directives or you can use any of our built-in, Excel-style filtering components.

 Provided "Unfreeze All" option under Freeze button on Data Grid & Tree Grid 

 IgxGridState working with IgxHierarchicalGrid -

• Added support for expansion states, column selection and row pinning.
• Added support for IgxTreeGrid and IgxHierarchicalGrid (including child grids)

 Exposied activeNodeChange output in the Grid - An event that is emitted when the active node is changed. You can use it to determine the Active focus position (header, tbody etc.), column index, row index or nested level (topic)

 Exposed new cellEditDone and rowEditDone non cancelable events - The arguments contains rowData that is the committed newValue.

• cellEditDone - Emitted after a cell has been edited and editing has been committed.
• rowEditDone - Emitted after exiting edit mode for a row and editing has been committed.

 Tooltips for grid cell text content and summary cell was implemented - Added support for tooltips on data cells default template and summary cells.

Enhanced Angular Components

IgxCombo

 igxCombo component caseSensitive property in filter search - In addition we've added `showSearchCaseIcon` input to display a case sensitive search icon in the search input. Icon click allows the user to easily toggle the search case sensitivity.

 igxCombo default positioning strategy - The default positioning strategy is now changed from ConnectedPositioningStrategy to AutoPositionStrategy. The Auto strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.

 onSearchInput is not cancellable and `IComboSearchInpitEventArgs` arguments are updated (topic)

IgxOverlay

 Do not close modal overlay on ESC key press - Added new property closeOnEscape in OverlaySettings that controls whether the overlay should close on escape keypress. By default closeOnEsc is set to false. Modal overlays shown directly through the Overlay Service no longer close on Escape by default. That behavior can now be specified using the closeOnEscape property.

IgxToast and IgxSnackBar

 show() method can now take a message parameter -  `message` property has been deprecated. You can place the message text in the toast content or pass it as a parameter to show method instead. An optional string parameter message has been added to show() method.

IgxNavBar

 The igx-action-icon has been renamed to igx-navbar-action. Thanks to the migrations It should be renamed in your components via ng update;

IgxCalendar and IgxMonthPicker 

- viewDateChanged emitted after the month/year presented in the view is changed after user interaction.

- activeViewChanged event emitted after the active view (DEFAULT, YEAR, DECADE) is changed on user interaction.

- viewDate day value is always 1 and activeView setter is now available as an input property.

[Sample and topic]

IgxTimePicker

 Define different styling for hours/minutes outside min and max values - Added a disabled style for time parts outside of the minimum and maximum range.

IgxDialog

 Added closeOnEscape - with it, the dialog can be allowed or prevented from closing when Esc is pressed.

Angular Material Design and More

 Material Icons Extended by Infragistics - this is an unofficial subset of icons that extends the official Material Design Icon set provided by Google. We felt the Material Design Icon set is too limited and we wanted to extend it by designing additional icons that will fit well within the Material Design language.

 Added igxHint support - Specifies a igx-hint for in the igx-select whenever needed.

 Themes - Added Dock Manager Support

 IgxDateRangePickerComponent calendar should display selected range if both start and end are filled and valid

 CLI - Added a template for IgxMap component.

 We now have an  ASP.NET Core Repository that consists of different ASP.NET Core applications. The idea is to provide examples of real world scenarios, and show how easy it can be to integrate between the server and a web application, built using any modern UI framework such as Angular, React, Web Components, jQuery, etc.

A good example of that is our new app, the TaskPlanner - This sample application demonstrates how to use the Github API with Octo Kit in order to load Ignite UI for Angular Issues and Pull requests into different visual elements like List and Grid. This app can be used to easily track our work and tasks progress.

Check out our Changelog for more information on what's new with the 10.1.0 release.

In summary, the Infragistics Angular team continues to strive to create an effortless experience for developers with our Angular components and controls. To quote the WP Carey School of Business - “The best companies deliver straightforward, reliable experiences that meet real needs. People want to interact with companies where doing business is personalized, easy and hassle-free.” 

Follow us on Medium and stay up to date with the latest Angular related perks that we work on, give us a star on GitHub and help us to continue improving 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