{"id":2603,"date":"2025-03-18T08:46:56","date_gmt":"2025-03-18T08:46:56","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=2603"},"modified":"2025-03-21T08:00:02","modified_gmt":"2025-03-21T08:00:02","slug":"ignite-ui-for-angular-19-1","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-for-angular-19-1","title":{"rendered":"What&#8217;s New: Ignite UI for Angular 19.1"},"content":{"rendered":"\n<p><span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">After the release of Ignite UI for Angular 19.0<\/span> 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:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Query Builder &#8211; new design, multi-table query support, nested queries, and more.<\/li>\n\n\n\n<li>Carousel &#8211; updated design and vertical orientation support.<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s look at each theme in more detail.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"query-builder-component-update\">Query Builder Component Update<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/query-builder\" target=\"_blank\" rel=\"noreferrer noopener\">Angular Query Builder<\/a> 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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">First, About the Design and Behavioral Changes<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"803\" height=\"450\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/query-builder-component.png\" alt=\"quiery builder overview before vs now\" class=\"wp-image-2644\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/query-builder-component.png 803w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/query-builder-component-300x168.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/query-builder-component-768x430.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/query-builder-component-480x269.png 480w\" sizes=\"auto, (max-width: 803px) 100vw, 803px\" \/><\/figure>\n\n\n\n<p>Full list of behavioral changes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Expression enters edit mode on a single click, <code>Enter<\/code> or <code>Space<\/code>.<\/li>\n\n\n\n<li>Selecting conditions inside the Query Builder component is no longer supported.<\/li>\n\n\n\n<li>Grouping\/ungrouping expressions is now achieved via the newly exposed Drag &amp; Drop functionality or users can reposition condition chips using the Arrow Up\/Down keys.<\/li>\n\n\n\n<li>Deleting multiple expressions through the context menu is no longer supported.<\/li>\n\n\n\n<li>Legend is removed.<\/li>\n\n\n\n<li>If the title input is not set, it will be an empty string by default.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Next, About the New Features<\/h3>\n\n\n\n<p><strong>The Angular Query Builder now supports multi-table query support<\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">Imagine a scenario where you have&nbsp;an <a href=\"https:\/\/www.infragistics.com\/resources\/sample-applications\/auto-shop-app\">e-commerce application<\/a> with separate tables for&nbsp;Orders,&nbsp;Customers, and&nbsp;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.<\/p>\n\n\n\n<p class=\"has-text-align-left\">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 <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/grids-and-lists\">Ignite UI Angular Grid<\/a> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/download.infragistics.com\/marketing\/Website\/blog\/query-builder\/Query-Builder-Multi-table-experience.gif\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Allows for the creation of nested queries using <code>IN and NOT IN<\/code> operators<\/strong><\/p>\n\n\n\n<p>Selecting the <code>IN<\/code> or <code>NOT IN<\/code> 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"786\" height=\"786\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items.png\" alt=\"\" class=\"wp-image-2626\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items.png 786w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items-300x300.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items-150x150.png 150w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items-768x768.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/03\/Items-480x480.png 480w\" sizes=\"auto, (max-width: 786px) 100vw, 786px\" \/><\/figure>\n\n\n\n<p><strong>A new option to template the search value input of the angular Query Builder<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;ng-template igxQueryBuilderSearchValue \n            let-searchValue\n            let-selectedField = \"selectedField\" \n            let-selectedCondition = \"selectedCondition\"\n            let-defaultSearchValueTemplate = \"defaultSearchValueTemplate\"&gt;\n    @if (selectedField?.field === 'Id' &amp;&amp; selectedCondition === 'equals'){\n        &lt;input type=\"text\" required &#91;(ngModel)]=\"searchValue.value\"\/&gt;\n    } @else {  \n        &lt;ng-container #defaultTemplate *ngTemplateOutlet=\"defaultSearchValueTemplate\"&gt;&lt;\/    ng-container&gt;\n    }\n&lt;\/ng-template&gt; <\/code><\/pre>\n\n\n\n<p><strong>Serializable output<\/strong><\/p>\n\n\n\n<p>Finally, the output object could be serialized to JSON. These enhancements make the Angular Query Builder more versatile and user-friendly than ever before.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"carousel-component-update\">Carousel Component Update<\/h2>\n\n\n\n<p>Now, the Angular Carousel component supports vertical orientation of the navigation buttons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Website\/blog\/query-builder\/Example-Angular-Carousel-component-with-vertical-mode.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"ignite-ui-for-angular-19-1-0-changelog\">Ignite UI for Angular 19.1.0 Changelog<\/h2>\n\n\n\n<p>Explore all the details <a href=\"https:\/\/www.infragistics.com\/blogs\/wp-login.php?redirect_to=https%3A%2F%2Fwww.infragistics.com%2Fblogs%2Fwp-admin%2Fpost.php%3Fpost%3D2603%26action%3Dedit&amp;reauth=1\">here<\/a>.<\/p>\n\n\n\n<p>General<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/blob\/master\/CHANGELOG.md#general-1\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>IgxCarousel<\/code>\n<ul class=\"wp-block-list\">\n<li><strong>Behavioral Changes<\/strong>&nbsp;&#8211; the&nbsp;<code>maximumIndicatorsCount<\/code>&nbsp;input property now defaults to&nbsp;<code>10<\/code>.<\/li>\n\n\n\n<li><strong>Deprecation<\/strong>&nbsp;&#8211;&nbsp;<code>CarouselIndicatorsOrientation<\/code>&nbsp;enum members&nbsp;<code>top<\/code>&nbsp;and&nbsp;<code>bottom<\/code>&nbsp;have been deprecated and will be removed in a future version. Use&nbsp;<code>start<\/code>&nbsp;and&nbsp;<code>end<\/code>&nbsp;instead.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>New Features<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/blob\/master\/CHANGELOG.md#new-features-1\" rel=\"noopener\"><\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>IgxBanner<\/code>\n<ul class=\"wp-block-list\">\n<li>Introduced a new&nbsp;<code>expanded<\/code>&nbsp;input property, enabling dynamic control over the banner&#8217;s state. The banner can now be programmatically set to &#8220;expanded&#8221; (visible) or &#8220;collapsed&#8221; (hidden) both initially and at runtime. Animations will trigger during runtime updates \u2014 the&nbsp;open animation&nbsp;plays when&nbsp;<code>expanded<\/code>&nbsp;is set to&nbsp;<code>true<\/code>, and the&nbsp;close animation&nbsp;plays when set to&nbsp;<code>false<\/code>. However, no animations will trigger when the property is set initially.<\/li>\n\n\n\n<li>The banner&#8217;s event lifecycle (<code>opening<\/code>,&nbsp;<code>opened<\/code>,&nbsp;<code>closing<\/code>,&nbsp;<code>closed<\/code>) only triggers through&nbsp;user interactions&nbsp;(e.g., clicking to open\/close). Programmatic updates using the&nbsp;<code>expanded<\/code>&nbsp;property will not fire any events.<\/li>\n\n\n\n<li>If the&nbsp;<code>expanded<\/code>&nbsp;property changes during an ongoing animation, the current animation will&nbsp;stop,&nbsp;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&nbsp;<code>expanded<\/code>&nbsp;is set to&nbsp;<code>false<\/code>, the close animation (5 seconds) will start from its 3rd second.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxQueryBuilder<\/code>&nbsp;has a new design that comes with an updated appearance and new functionality\n<ul class=\"wp-block-list\">\n<li><code>IgxQueryBuilderComponent<\/code>\n<ul class=\"wp-block-list\">\n<li>Introduced the ability to create nested queries by specifying IN\/NOT IN operators.<\/li>\n\n\n\n<li>Introduced the ability to reposition condition chips by dragging or using&nbsp;<code>Arrow Up\/Down<\/code>.<\/li>\n\n\n\n<li>Added the&nbsp;<code>entities<\/code>&nbsp;property that accepts an array of&nbsp;<code>EntityType<\/code>&nbsp;objects describing an entity with its name and an array of fields. The&nbsp;<code>fields<\/code>&nbsp;input property has been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on&nbsp;<code>ng update<\/code>.<\/li>\n\n\n\n<li>Added&nbsp;<code>disableEntityChange<\/code>&nbsp;property that can disable the entity selected on a root level after the initial selection. Defaults to&nbsp;<code>false<\/code>.<\/li>\n\n\n\n<li>Added&nbsp;<code>disableReturnFieldsChange<\/code>&nbsp;property that can be used to disable the fields combo on a root level. Defaults to&nbsp;<code>false<\/code>.<\/li>\n\n\n\n<li>Added the&nbsp;<code>canCommit<\/code>,&nbsp;<code>commit<\/code>&nbsp;and&nbsp;<code>discard<\/code>&nbsp;public methods, allowing the user to save\/discard the current state of the expression tree.<\/li>\n\n\n\n<li>Added option to template the search value input:<code>&lt;ng-template igxQueryBuilderSearchValue let-searchValue let-selectedField = \"selectedField\" let-selectedCondition = \"selectedCondition\" let-defaultSearchValueTemplate = \"defaultSearchValueTemplate\"&gt; @if (selectedField?.field === 'Id' &amp;&amp; selectedCondition === 'equals'){ &lt;input type=\"text\" required [(ngModel)]=\"searchValue.value\"\/&gt; } @else { &lt;ng-container #defaultTemplate *ngTemplateOutlet=\"defaultSearchValueTemplate\"&gt;&lt;\/ ng-container&gt; } &lt;\/ng-template&gt;<\/code><\/li>\n\n\n\n<li>Behavioral Changes<\/li>\n\n\n\n<li>Expression enters edit mode on a single click,&nbsp;<code>Enter<\/code>&nbsp;or&nbsp;<code>Space<\/code>.<\/li>\n\n\n\n<li>Selecting conditions inside the&nbsp;<code>IgxQueryBuilderComponent<\/code>&nbsp;is no longer supported. Grouping\/ungrouping expressions is now achieved via the newly exposed Drag &amp; Drop functionality.<\/li>\n\n\n\n<li>Deleting multiple expressions through the context menu is no longer supported.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxQueryBuilderHeaderComponent<\/code>\n<ul class=\"wp-block-list\">\n<li>Behavioral Change<\/li>\n\n\n\n<li>Legend is no longer shown.<\/li>\n\n\n\n<li>If the&nbsp;<code>title<\/code>&nbsp;input property is not set, by default it would be empty string.<\/li>\n\n\n\n<li>Deprecation<\/li>\n\n\n\n<li>The&nbsp;<code>showLegend<\/code>&nbsp;and&nbsp;<code>resourceStrings<\/code>&nbsp;input properties have been deprecated and will be removed in a future version. Automatic migrations are available and will be applied on&nbsp;<code>ng update<\/code>.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IFilteringExpression<\/code>\n<ul class=\"wp-block-list\">\n<li>A new optional property called&nbsp;<code>conditionName<\/code>&nbsp;has been introduced. This would generally be equal to the existing&nbsp;<code>condition.name<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IFilteringOperation<\/code>\n<ul class=\"wp-block-list\">\n<li>A new optional property called&nbsp;<code>isNestedQuery<\/code>&nbsp;has been introduced. It&#8217;s used to indicate whether the condition leads to a nested query creation.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"to-wrap-it-all-up\">To Wrap It All Up\u2026<\/h2>\n\n\n\n<p>Seamlessly crafted for compatibility, <a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\">Ignite UI for Angular<\/a> 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&nbsp;<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\" rel=\"noopener\">Ignite UI for Angular GitHub<\/a>&nbsp;repository. With this in mind, we are always open to suggestions and feedback \u2013 it makes us grow and better respond to your development needs.<\/p>\n\n\n\n<p>If you need more details, we encourage you to check out our:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/discord.com\/channels\/836634487483269200\/836636712292581456\" target=\"_blank\" rel=\"noreferrer noopener\">Discord channel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/discussions\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub discussions<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/blob\/master\/ROADMAP.md\" target=\"_blank\" rel=\"noreferrer noopener\">Roadmap<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.youtube.com\/channel\/UCiPzmz_UyRqQE0Tboc7n66g\" target=\"_blank\" rel=\"noreferrer noopener\">YouTube channel<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/twitter.com\/infragistics\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter<\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ignite UI for Angular 19.1 comes with powerful new capabilities, including Query Builder and Carousel component. Learn more in this release blog post.<\/p>\n","protected":false},"author":20,"featured_media":2631,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-2603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=2603"}],"version-history":[{"count":15,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2603\/revisions"}],"predecessor-version":[{"id":2645,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2603\/revisions\/2645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2631"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=2603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=2603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=2603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}