What’s New: Ignite UI for Angular 19.1

What’s New: Ignite UI for Angular 19.1

Ignite UI for Angular 19.1 comes with powerful new capabilities, including Query Builder and Carousel component. Learn more in this release blog post.

7min read

After the release of Ignite UI for Angular 19.0 in November 2024, which came with compatibility with Angular 19 and an enhanced grid summary feature, it is time for Ignite UI for Angular 19.1. It comes with great new designs and powerful new capabilities:

  • Query Builder – new design, multi-table query support, nested queries, and more.
  • Carousel – updated design and vertical orientation support.

Let’s look at each theme in more detail.

Query Builder Component Update

Angular Query Builder component has been out for some time, and it provides a rich UI that allows developers to build complex data filtering queries for a specified data set. It has received a fantastic new design and several powerful new features.

First, About the Design and Behavioral Changes

quiery builder overview before vs now

Full list of behavioral changes:

  • Expression enters edit mode on a single click, Enter or Space.
  • Selecting conditions inside the Query Builder component is no longer supported.
  • Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality or users can reposition condition chips using the Arrow Up/Down keys.
  • Deleting multiple expressions through the context menu is no longer supported.
  • Legend is removed.
  • If the title input is not set, it will be an empty string by default.

Next, About the New Features

The Angular Query Builder now supports multi-table query support

Imagine a scenario where you have an e-commerce application with separate tables for Orders, Customers, and Products. A multi-table query can combine data from these tables to show a detailed view of each order, including customer details and product information, all within one grid component. Depending on the specific scenario, it could be enhanced by the user on the fly. This improves the user experience by providing a holistic view without the need to navigate between different application sections.

In this regard, the Angular Query Builder component enables you to create such complex queries visually. The component allows users to select fields from different tables, define relationships, and set conditions. The resulting query can then be executed to fetch the combined data, which can be bound to Ignite UI Angular Grid component for display. This approach simplifies the process of working with relational data and makes it more accessible to users who may not be familiar with writing SQL queries.

Allows for the creation of nested queries using IN and NOT IN operators

Selecting the IN or NOT IN comparison operators enables you to create SQL subqueries. They are a powerful tool that allows you to perform more complex queries by embedding one query within another. This can now be achieved through the Query Builder UI.

A new option to template the search value input of the angular Query Builder

<ng-template igxQueryBuilderSearchValue 
            let-searchValue
            let-selectedField = "selectedField" 
            let-selectedCondition = "selectedCondition"
            let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
    @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
        <input type="text" required [(ngModel)]="searchValue.value"/>
    } @else {  
        <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
    }
</ng-template>

Serializable output

Finally, the output object could be serialized to JSON. These enhancements make the Angular Query Builder more versatile and user-friendly than ever before.

Now, the Angular Carousel component supports vertical orientation of the navigation buttons.

Ignite UI for Angular 19.1.0 Changelog

Explore all the details here.

General

  • IgxCarousel
    • Behavioral Changes – the maximumIndicatorsCount input property now defaults to 10.
    • Deprecation – CarouselIndicatorsOrientation enum members top and bottom have been deprecated and will be removed in a future version. Use start and end instead.

New Features

  • IgxBanner
    • Introduced a new expanded input property, enabling dynamic control over the banner’s state. The banner can now be programmatically set to “expanded” (visible) or “collapsed” (hidden) both initially and at runtime. Animations will trigger during runtime updates — the open animation plays when expanded is set to true, and the close animation plays when set to false. However, no animations will trigger when the property is set initially.
    • The banner’s event lifecycle (opening, opened, closing, closed) only triggers through user interactions (e.g., clicking to open/close). Programmatic updates using the expanded property will not fire any events.
    • If the expanded property changes during an ongoing animation, the current animation will stop, and the opposite animation will begin from where the previous animation left off. For instance, if the open animation (10 seconds) is interrupted at 6 seconds and expanded is set to false, the close animation (5 seconds) will start from its 3rd second.
  • IgxQueryBuilder has a new design that comes with an updated appearance and new functionality
    • IgxQueryBuilderComponent
      • Introduced the ability to create nested queries by specifying IN/NOT IN operators.
      • Introduced the ability to reposition condition chips by dragging or using Arrow Up/Down.
      • Added the entities property that accepts an array of EntityType objects describing an entity with its name and an array of fields. The fields input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
      • Added disableEntityChange property that can disable the entity selected on a root level after the initial selection. Defaults to false.
      • Added disableReturnFieldsChange property that can be used to disable the fields combo on a root level. Defaults to false.
      • Added the canCommit, commit and discard public methods, allowing the user to save/discard the current state of the expression tree.
      • Added option to template the search value input:<ng-template igxQueryBuilderSearchValue let-searchValue let-selectedField = "selectedField" let-selectedCondition = "selectedCondition" let-defaultSearchValueTemplate = "defaultSearchValueTemplate"> @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){ <input type="text" required [(ngModel)]="searchValue.value"/> } @else { <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></ ng-container> } </ng-template>
      • Behavioral Changes
      • Expression enters edit mode on a single click, Enter or Space.
      • Selecting conditions inside the IgxQueryBuilderComponent is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
      • Deleting multiple expressions through the context menu is no longer supported.
    • IgxQueryBuilderHeaderComponent
      • Behavioral Change
      • Legend is no longer shown.
      • If the title input property is not set, by default it would be empty string.
      • Deprecation
      • The showLegend and resourceStrings input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on ng update.
  • IFilteringExpression
    • A new optional property called conditionName has been introduced. This would generally be equal to the existing condition.name.
  • IFilteringOperation
    • A new optional property called isNestedQuery has been introduced. It’s used to indicate whether the condition leads to a nested query creation.

To Wrap It All Up…

Seamlessly crafted for compatibility, Ignite UI for Angular is the library that enables you to leverage the power of the latest technologies and major releases. Committed to providing you with the best Angular UI toolkit and related insights, our goal is to equip you with more know-how, new features, enhanced performance, and improved stability. Some of the enhancements were added thanks to the requests from users like yourself through our Ignite UI for Angular GitHub repository. With this in mind, we are always open to suggestions and feedback – it makes us grow and better respond to your development needs.

If you need more details, we encourage you to check out our:

Angular
Request a Demo