Ignite UI for Angular 7.2.0 Release

Slav Karaslavov / Monday, March 11, 2019

The 7.2.0 release could be the biggest for Ignite UI for Angular up to date. This release delivers the largest component yet to make it into the toolkit, as well as massive improvements to other commonly used features and components. Version 7.2.0 features only user features request posted over the last several months, which is reinforcing the statement that we are committed to user success with Ignite UI for Angular.


Hierarchical Data Grid

So let us starts this review with the most significant and the largest new component we are releasing - the Hierarchical Data Grid A.K.A. Hierarchical Data Table. Using this Data Grid you can display your data in a hierarchical view where you have parent records linked to child tables. Upon expanding a parent row and number of children data grids are shown. You can control features like filtering, sorting, pinning, etc. for each grid separately. The Hierarchical Grid support multiple child tables under a single parent record without sacrificing any of the performance the flat grid offers. Features like horizontal and vertical DOM virtualization, and paging are applicable to the Hierarchical Grid as a while, as well as to each individual flat grid inside the hierarchical schema of tables the grid is bound to. Samples displaying the Hierarchical Grid can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/hierarchicalgrid/hierarchical_grid.html


One of the most requested features for the Data Grid has been an Excel-style filtering UI. We heard you, and we are delivering this feature with 7.2.0. This UI doesn’t replace the existing Row-style filtering UI that the Data Grid offers, and instead Excel Style filtering can be turned on instead of the current Row-style filtering. On top of that, the Excel-style filtering UI gives your end-users quick and easy way to end-users to interact with features like Column Moving, Sorting and Column Hiding. All of these UI bits are toggle-able, so you can tailor the UI configuration perfectly to the needs of your application, and ultimately your end-users. Samples displaying the Excel-style filtering UI can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/excel_style_filtering.html




With 7.2.0, we have decided to complete the set of drop down components Ignite UI for Angular offers. So far, we had a simple Drop Down built on top of the generic Toggle component and the Overlay service the product offers. We also had the most advanced component, which is the Combo. We had quite a few user requests to fill the gap in between. We are now releasing a Select component, which is a form component that mimics the behavior of the native HTML select, but with a much more fluid UX, consistent with the rest of your application. We have strictly followed the Google Material guidelines for this component, and we have made it be as device agnostic, as the native HTML select is. Samples displaying the Select component can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/select.html



The other drop down component that Ignite UI for Angular was missing is an Autocomplete. Version 7.2.0 features that as well. We have developed an Autocomplete directly, which allows developers to link an input component with a drop down component, and to control what the drop down displays based on the user input in the input field. Samples displaying the Autocomplete directive in action can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/autocomplete.html


Date and Time picker enhancements

The Date and Time picker components in Ignite UI for Angular offered a pop out dialog picker views so far. With 7.2.0, you can now configure them to be editable input components with drop-down pickers respectively for date and time. Samples displaying the new modes for the Date and Time pickers can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/date_picker.html and https://www.infragistics.com/products/ignite-ui-angular/angular/components/time_picker.html



Calendar enhancements

In this release, we have made a few enhancement to the Calendar component, by separating its views into separate components. Now you will be able to instantiate a stand-alone month and year view, if your application needs are for end-users to fill only those portions of a date. Samples displaying the separate Calendar view components can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/month_picker.html

Outlined Button

The Ignite UI for Angular Button directive now includes an Outlined button type, which we were previously missing. Samples displaying the different Button types can be interacted with here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/button.html


Theming – Component elevations and roundness

The Ignite UI for Angular theming engine now allows you to change the elevation (shadows) and the roundness (border-radius) of individual Ignite UI for Angular components in your application, or the overall roundness factor of a theme applied across your application.


The full release notes for each version of Ignite UI for Angular are located here: https://github.com/IgniteUI/igniteui-angular/releases

An additional feature, which will be released within a couple of weeks, is the Multi Cell Selection, A.K.A Drag Selection, for the Data Grid components. We will keep you posted!