Ignite UI for Angular 22.2: What Are All The Exciting Improvements In This Release?

Radoslav Mirchev / Thursday, November 3, 2022

During the past months we have been busy developing cool new features and components for you and they all come together in the Ultimate 22.2 release, that comes with support for the Angular 14. Let's see what new goodies we have for you.

In addition to Ignite UI for Angular 22.2 I am glad to announce that today we’re shipping tons of UI/UX upgrades with the latest Ignite UI 22.2 Release. Extending your favorite UI library, we are now adding more components and features, better controls, brand-new data grids across Blazor, Angular, and Web Components, improved code generation capabilities with App Builder, Figma design tool support, and a lot more.

Whether you want to design and build modern web apps, replace legacy applications with better WYSIWYG low-code app building experiences, or you just want to start with a more full-featured dev stack, Ignite UI 22.2 Product Release is now here.

Let’s dive in to see the most recent tweaks that accelerate your overall development process and empower you to deliver robust, consistent and accessible UI across your projects.

Ignite UI for Angular

Query Builder

The Ignite UI Query Builder component provides a way to build complex queries through the UI. By specifying AND/OR operators, conditions and values the user creates an expression tree which describes the query.

Example of Angular Query Builder Component

Pivot Grid Export to Excel

The Excel Exporter service can export data to excel from the IgxPivotGrid. The data export functionality is encapsulated in the IgxExcelExporterService class. To trigger the process, you need to invoke the IgxExcelExporterService's export method and pass the IgxPivotGrid component as the first argument.

Example of Angular Pivot Grid export to Excel


Angular Grid Validator service

The Grid's editing exposes a built-in validation mechanism of user input when editing cells/rows. It extends the Angular Form validation functionality to allow easier integration with a well known functionality. When the state of the editor changes, visual indicators are applied to the edited cell. Angular grid validator service comes with the following validators are supported out-of-the-box:

  • required
  • min
  • max
  • email
  • minlength
  • maxlength
  • pattern

Example of Angular Grid Validator service

Angular Pivot Grid State Persistence

Тhe igxGridState directive allows developers to easily save and restore the grid state. When the IgxGridState directive is applied on the grid, it exposes the getState and setState methods that developers can use to achieve state persistence in any scenario. IgxGridState directive supports saving and restoring the state of the following features:

  • Sorting
  • Filtering
  • Cell Selection
  • Row Selection
  • Column Selection
  • Expansion
  • Pivot Configuration

Example of Angular Pivot Grid State Persistence

Angular Pivot Grid Filtering Expressions

All dimensions (filters, rows, columns) can be filtered via the chip UI or the API. This functionality is embedded and enabled by default.

Angular Pivot Grid aggregation method label

A value configuration requires a member that matches a field from the provided data or it can define a custom aggregator function for more complex custom scenarios. Out of the box, there are 4 predefined aggregations that can be used depending on the data type of the data field:

  • IgxPivotNumericAggregate - for numeric fields. Contains the following aggregation functions: SUM, AVG, MIN, MAX, COUNT.
  • IgxPivotDateAggregate - for date fields. Contains the following aggregation functions: LATEST, EARLIEST, COUNT.
  • IgxPivotTimeAggregate - for time fields. Contains the following aggregation functions: LATEST, EARLIEST, COUNT.
  • IgxPivotAggregate - for any other data types. This is the base aggregation. Contains the following aggregation functions: COUNT.

Update of Angular Tabs UI

Example of Angular Tabs

Angular Combo Updates - filtering strategy, ability to filter multiple fields and new "searchKey" input

Now the Angular Combo component has a "searchKey" input which enables the data key to be used to search or filter by. 

 ability to filter multiple fields and new "searchKey" input in Angular combo

Support for Angular 14.0

Angular Grid autosize performance improvements

Wrap-Up

We not only strive to ship new features on a continuous schedule to enhance performance and to provide stability improvements but we are also committed to providing you with the best Angular UI toolkit and related insights to empower you with more know-how. Apart from the newest Pivot Grid that is so crucial, we know that other components like the Angular Data Grid are also super critical. That's why we published a helpful Angular UI Data Grid tutorial to help you learn how to create a full-featured Angular UI Grid from scratch. Go on and watch it.

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.

Ignite UI Angular