{"id":776,"date":"2023-05-16T07:48:00","date_gmt":"2023-05-16T07:48:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=776"},"modified":"2025-02-25T15:07:34","modified_gmt":"2025-02-25T15:07:34","slug":"ignite-ui-for-angular-16-0-0","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/ignite-ui-for-angular-16-0-0","title":{"rendered":"Ignite UI for Angular 16.0.0: See The Exciting Improvements"},"content":{"rendered":"\n<p>We are all excited about the new Angular v16 release!\u00a0We are eager to put our hands on the standalone APIs and take advantage of improved reactivity, server-side rendering, and tooling. At Infragistics, we strive to provide you with the best possible user experience and keep you updated about the latest versions of frameworks, platforms, and technology. That is why we are excited to share what we have included in the <a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/releases\/tag\/16.0.0\" rel=\"noopener\">Ignite UI for Angular 16.0.0<\/a> release, with full support for\u00a0Angular v16.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"all-thats-new-in-ignite-ui-for-angular-16-0-0\">All That&#8217;s&nbsp;New In Ignite UI for Angular 16.0.0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"\/products\/ignite-ui-angular\/angular\/components\/general\/how-to\/how-to-use-standalone-components\">Using Standalone Components with Ignite UI for Angular<\/a>&nbsp;&#8211; Preview Release<\/h3>\n\n\n\n<p>One of the biggest differences is that&nbsp;Angular v16 introduces the concept of&nbsp;<a href=\"https:\/\/angular.io\/guide\/standalone-components\" rel=\"noopener\">standalone components<\/a>. This allows for a simplified way of building applications by reducing the need for using&nbsp;NgModules.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><a href=\"\/products\/ignite-ui-angular\/angular\/components\/expansion-panel\">Tooltip for the full subtitle\/title on hover for the Expansion panel<\/a><\/h3>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"the-complete-ignite-ui-for-angular-change-log-for-16-0-0\">The Complete&nbsp;Ignite UI for Angular Change Log for&nbsp;16.0.0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">General<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p dir=\"auto\">All Ignite UI for Angular components are now exported as&nbsp;<code>standalone<\/code>&nbsp;components. The library still exports&nbsp;<code>NgModules<\/code>, which have been preserved for backward compatibility, but they no longer declare any of the Ignite UI for Angular components. Instead, they just import and export the&nbsp;<code>standalone<\/code>&nbsp;components. Bare in mind that the&nbsp;<code>standalone<\/code>&nbsp;components are still in a preview stage. Some utility directive exports may change in the future and may be missing from the documentation in the initial release, hence the&nbsp;<code>preview<\/code>&nbsp;state of the feature.<\/p><br><p dir=\"auto\">Now you can do:<\/p><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ IGX_GRID_DIRECTIVES exports all grid related components and directives\nimport { IGX_GRID_DIRECTIVES } from 'igniteui-angular';\n\n@Component({\n    selector: 'app-grid-sample',\n    styleUrls: ['grid.sample.scss'],\n    templateUrl: 'grid.sample.html',\n    standalone: true,\n    imports: [IGX_GRID_DIRECTIVES, AsyncPipe]\n})<\/pre>\n\n\n\n<p>or<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Single import of only the &lt;igx-grid> component.\nimport { IgxGridComponent } from 'igniteui-angular';\n\n@Component({\n    selector: 'app-grid-sample',\n    styleUrls: ['grid.sample.scss'],\n    templateUrl: 'grid.sample.html',\n    standalone: true,\n    imports: [IgxGridComponent, AsyncPipe]\n})<\/pre>\n\n\n\n<p>or still<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.\nimport { IgxGridModule } from 'igniteui-angular';\n\n@Component({\n    selector: 'app-grid-sample',\n    styleUrls: ['grid.sample.scss'],\n    templateUrl: 'grid.sample.html',\n    standalone: true,\n    imports: [IgxGridModule, AsyncPipe]\n})<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>IgxChip<\/code>\n<ul class=\"wp-block-list\">\n<li><strong>Behavioral Change:<\/strong>&nbsp;The&nbsp;<code>igxChip<\/code>&nbsp;styles have been revisited and the select container animation has been removed when selecting\/deselecting a chip.<\/li>\n\n\n\n<li><strong>Behavioral Change:<\/strong>&nbsp;The remove button behavior has been revisited. Now when the chip is in&nbsp;a&nbsp;<code>disabled<\/code>&nbsp;state, the remove button is hidden.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxGrid<\/code>,&nbsp;<code>IgxHierarchicalGrid<\/code>\n<ul class=\"wp-block-list\">\n<li><strong>Breaking Change:<\/strong>&nbsp;The IgxHeaderExpandIndicatorDirective and IgxHeaderCollapseIndicatorDirective directives, as well as the headerExpandIndicatorTemplate and headerCollapseIndicatorTemplate properties have been renamed to IgxHeaderExpandedIndicatorDirective, IgxHeaderCollapsedIndicatorDirective, headerExpandedIndicatorTemplate, and headerCollapsedIndicatorTemplate respectively to properly reflect their purpose. Automatic migrations are available and will be applied on ng update.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxGrid<\/code>,&nbsp;<code>IgxTreeGrid<\/code>,&nbsp;<code>IgxHierarchicalGrid<\/code><\/li>\n<\/ul>\n\n\n\n<p><strong>Breaking Changes<\/strong>: The following grid properties, deprecated since version 12.1.0, are now removed:<ul><li><em>evenRowCSS<\/em>;<\/li><li><em>oddRowCSS<\/em>;<\/li><li><em>page<\/em>;<\/li><li><em>paging<\/em>;<\/li><li><em>perPage<\/em>;<\/li><li><em>totalPages<\/em>;<\/li><li><em>isFirstPage<\/em>;<\/li><li><em>isLastPage<\/em>;<\/li><\/ul>Also the following deprecated grid events are removed.<ul><li><em>pageChange<\/em>;<\/li><li><em>perPageChange<\/em>;<\/li><li><em>pagingDone<\/em>;<\/li><\/ul>Deprecated methods removed from the grid API are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>nextPage<\/em>;<\/li>\n\n\n\n<li><em>previousPage<\/em>;<\/li>\n\n\n\n<li><em>paginate<\/em>;<\/li>\n\n\n\n<li><em>getCellByColumnVisibleIndex<\/em>;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><a id=\"user-content-new-features\" class=\"anchor\" href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/blob\/master\/CHANGELOG.md#new-features\" rel=\"noopener\"><\/a>New Features<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>IgxChip<\/code>\n<ul class=\"wp-block-list\">\n<li>New input&nbsp;<code>variant<\/code>&nbsp;which can take any of the following values:&nbsp;<code>'primary'<\/code>,&nbsp;<code>'info'<\/code>,&nbsp;<code>'success'<\/code>,&nbsp;<code>'warning'<\/code>,&nbsp;<code>'danger'<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxExpansionPanel<\/code>:\n<ul class=\"wp-block-list\">\n<li><code>IgxExpansionPanelTitleDirective<\/code>&nbsp;and&nbsp;<code>IgxExpansionPanelDescriptionDirective<\/code>&nbsp;show tooltip of the provided text content.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxDateRangePicker<\/code>\n<ul class=\"wp-block-list\">\n<li>Added&nbsp;<code>showWeekNumbers<\/code>&nbsp;input that toggles whether or not the number of a week will be visible next to it<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxGrid<\/code>,&nbsp;<code>IgxHierarchicalGrid<\/code>:\n<ul class=\"wp-block-list\">\n<li><code>totalItemCount<\/code>&nbsp;can now also be bound as&nbsp;<code>Input<\/code>&nbsp;in remote virtualization scenarios.<\/li>\n\n\n\n<li><code>rowExpandedIndicatorTemplate<\/code>,&nbsp;<code>rowCollapsedIndicatorTemplate<\/code>,&nbsp;<code>headerExpandedIndicatorTemplate<\/code>,&nbsp;<code>headerCollapsedIndicatorTemplate<\/code>&nbsp;can now also be bound as&nbsp;<code>Input<\/code>&nbsp;to provide templates for the row and header expand\/collapse indicators respectively. This is in addition to the existing equivalent template directives to allow reuse.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>IgxPivotGrid<\/code>\n<ul class=\"wp-block-list\">\n<li>Added&nbsp;<code>pivotConfigurationChanged<\/code>&nbsp;event triggered any time any of&nbsp;the&nbsp;<code>pivotConfiguration<\/code>&nbsp;properties are changed via the UI.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><code>ISortingExpression<\/code>&nbsp;now accepts an optional generic type parameter for type narrowing of the&nbsp;<code>fieldName<\/code>&nbsp;property to keys of the data item, e.g.&nbsp;<code>ISortingExpression&lt;MyDataItem&gt;<\/code><\/li>\n\n\n\n<li><code>Util<\/code>\n<ul class=\"wp-block-list\">\n<li>Added new&nbsp;<code>CachedDataCloneStrategy<\/code>&nbsp;that allows for cloning object with circular references.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wrap-up\">Wrap-Up<\/h2>\n\n\n\n<p>We continue to ship new features, improve performance, and provide stability improvements continuously. Committed to providing you with the best&nbsp;<a href=\"\/products\/ignite-ui-angular\">Angular UI toolkit<\/a>&nbsp;and related insights, our goal is to empower you with more know-how. Apart from the newest Pivot Grid that is so crucial, we know that other components like&nbsp;the Angular Data Grid are also super critical. That&#8217;s why we published a helpful Angular UI Data Grid tutorial&nbsp;to help you&nbsp;learn how to&nbsp;create a full-featured Angular UI Grid from scratch. Go on and watch it.<\/p>\n\n\n\n<iframe width=\"100%\" height=\"435\" src=\"https:\/\/www.youtube.com\/embed\/Xv_fQVQ8fmM?si=8hfRdY-rRri0Wo_k\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<p>We also continue to&nbsp;develop the best cloud-based, low-code app builder&nbsp;platform<span class=\"MUxGbd wuQ4Ob WZ8Tjf\">&nbsp;\u2014&nbsp;<a href=\"\/products\/appbuilder\">App Builder<\/a>&nbsp;\u2014that&nbsp;<\/span>accelerates&nbsp;the design-to-code process by mapping Sketch or Adobe XD design files to real UI components and creating production-ready code. This way, you can generate Angular, Blazor, or Web Components applications faster than ever. Some of the enhancements are thanks to the requests from users like yourself through our&nbsp;<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\" rel=\"noopener\">GitHub<\/a>&nbsp;repository. With this in mind, we are always open to suggestions and feedback \u2013 it makes us grow and better serve your development needs. Lastly, we know that transparency and visibility of our next goals are also fundamental. That&#8217;s why we keep the&nbsp;<a href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/blob\/master\/ROADMAP.md\" rel=\"noopener\">roadmap<\/a>&nbsp;always up to date!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"in-addition\"><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">In Addition<\/span><\/span><\/h2>\n\n\n\n<p><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">Follow us on\u202f<\/span><\/span><a class=\"Hyperlink  BCX9 SCXW201824464\" href=\"https:\/\/medium.com\/ignite-ui\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"TextRun Underlined  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">Medium<\/span><\/span><\/a><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">\u202fto stay up-to-date and learn about the latest Angular-related projects we are working on. Give us a star on\u202f<\/span><\/span><a class=\"Hyperlink  BCX9 SCXW201824464\" href=\"https:\/\/github.com\/IgniteUI\" rel=\"noopener\"><span class=\"TextRun Underlined  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">GitHub<\/span><\/span><\/a><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">\u202fand help us continue improving our product by addressing any concerns, questions, or feature requests in the\u202f<\/span><\/span><a class=\"Hyperlink  BCX9 SCXW201824464\" href=\"https:\/\/github.com\/IgniteUI\/igniteui-angular\/issues\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"TextRun Underlined  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">issues<\/span><\/span><\/a><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\">\u202fsection.\u202fWe will continue to do our best to constantly improve the product experience to meet all your needs and build apps with ease.<\/span><\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/static.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-Angular\/ignite-ui-angular-you-get-ad.gif\" alt=\"Ignite UI for Angular benefits\"\/><\/figure>\n\n\n\n<p><span class=\"TextRun  BCX9 SCXW201824464\" lang=\"EN-US\"><span class=\"NormalTextRun  BCX9 SCXW201824464\"><\/span><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are shipping the new Ignite UI for Angular 16.0.0 release today with full support for Angular v16! See the latest updates and start building better apps.<\/p>\n","protected":false},"author":20,"featured_media":2380,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-776","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\/776","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=776"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/776\/revisions"}],"predecessor-version":[{"id":2174,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/776\/revisions\/2174"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2380"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}