Blog Developers

Just in Time for Angular 17 - It’s Ignite UI 17.0.0!

Radoslav Mirchev / Monday, November 13, 2023

Angular 17 is here and many refer to it as Angular Renaissance! New features, new branding, new website, new future-looking identity – these exciting things make it a really special release. And just in time for Angular 17, there’s Ignite UI 17.0.0 as well.

Try Ignite UI for Angular

But what is all the excitement about? Let's take a glimpse at what’s new there:

  • A rewritten learning journey, better documentation, and tutorials at Angular.dev, empowering everyone to start learning at their own pace and use the framework for their projects much more easily than before. 
  • The new built-in control flow that has the goal to help developers tackle *ngIf, *ngSwitch, and *ngFor and achieve “up to 90% faster runtime with built-in control flow loops." 
  • The new deferrable views that enable declarative and powerful lazy loading with "unprecedented ergonomics", making Angular faster and more performant than ever. 
  • Hydration, Hybrid rendering support, and SSR - all to enhance both the developer experience and app performance. 
  • Vite and esbuild that are now enabled by default for new projects. 
  • Plus, more things that are explored in detail in the Angular 17 Release blog – Introducing Angular v17 

As Minko Gechev, Product and DevRel lead for Angular at Google, points out; " Angular’s renaissance has been going with full steam for the past couple of versions. We’ve been picking up momentum with improvements such as signal-based reactivity, hydration, standalone components, directive composition, and dozens of other features."

If we are to compare this to what the Ignite UI for Angular team does, it’s 7 years of keeping up with all that’s new in Angular, 13 major versions, within 7 days on median. All this because we are committed to staying at the forefront of innovation. And now, fresh off the heels of Angular 17 Release, you can boost your development processes with an improved Ignite UI for Angular library, compatible with the newest and most exciting updates of the framework.

Angular Version Release date Ignite UI for Angular Release date Turnaround time in days
4.0.0 13-Dec-16 4.0.0 18-April-17 126
5.0.0 1-Nov-17 5.0.0 3-Nov-17 2
6.0.0 4-May-18 6.0.0 21-May-18 17
7.0.0 18-Oct-18 7.0.0 26-Nov-18 39
8.0.0 28-May-19 8.0.0 19-Jun-19 22
9.0.0 6-Feb-20 9.0.0 11-Feb-20 5
10.0.0 24-Jun-20 10.0.0 25-Jun-20 1
11.0.0 11-Nov-20 11.0.0 13-Nov-20 2
12.0.0 12-May-21 12.0.0 14-May-21 2
13.0.0 4-Nov-21 13.0.0 23-Nov-21 19
14.0.0 2-Jun-22 14.0.0 9-Jun-22 7
15.0.0 16-Nov-22 15.0.0 23-Nov-22 7
16.0.0 3-May-23 16.0.0 15-May-23 12
17.0.0 8-Nov-23 17.0.0 9-Nov-23 1

Ignite UI for Angular median turnaround time to match the latest Angular Release is 7 days!

What is new in Ignite UI for Angular 17.0.0

 Angular 17 compatibility

 Improved tree-shaking capability

We've been working on improving the tree-shaking capability of the product since version 16.1.0. We have performed the following changes:

  • Animations: Now exported from a new entry point under `igniteui-angular/animations`. Unused animations will no longer be bundled together with the product.
  • Localization: You will no longer get all default localization resources, regardless of whether you use certain components or not. You will get strings only for the components you use in your application.
  • Trial watermark: You will no longer receive a trial watermark in the bundle when using a licensed package, even though the trial watermark is unused.
  • Material Icons Extended: you will no longer get unused icons in the bundle. 

 Official Standalone components

Standalone components support is now out of preview. All igniteui-angular components are exported as standalone components. There are also utility directive arrays for each component. Read more about standalone components in this article.

 Complete Ignite UI for Angular 17.0.0 Changelog

Here are all notable changes:

  • `IgxCard`
  • **Breaking Change** The `type` attribute has been deprecated and will be removed in a future version. The default view of the card component is now `outlined`. Users can switch to `elevated` view by adding the newly created `elevated` property to a card.
  • `standalone components` support is now official
  • added `IGX_RADIO_GROUP_DIRECTIVES` for `IgxRadioGroupDirective` and `IgxRadioComponent`
  • `animations` are now imported from `igniteui-angular/animations`/`@infragistics/igniteui-angular/animations`
  • Tree-shaking of the product has been improved
  • `igniteui-angular-i18n` is now tree-shakeable
  • `igniteui-angular/animations` is now tree-shakeable
  • `igniteui-angular` components have improved tree-shaking
  • **Breaking Change** `getCurrentResourceStrings` has been removed. Use the specific component string imports instead.
  • E.g. EN strings come from `igniteui-angular`: `import { GridResourceStringsEN } from 'igniteui-angular';`
  • E.g. DE or other language strings come from `igniteui-angular-i18n`: `import { GridResourceStringsDE } from 'igniteui-angular-i18n';`
  • DisplayDensity token and inputs are deprecated in favor of `--ig-size` theming
  • We're working on reducing the library size
  • `IgxRadioComponent` size has been reduced in half
  • `IgxSwitchComponent` size has been reduced in half
  • `IgxRadioComponent`
  • **Breaking Change** `IChangeRadioEventArgs` is now `IChangeCheckboxEventArgs`. `ng update` to `17.0.0` will automatically migrate this for you.
  • **Breaking Change** `RadioLabelPosition` is now `LabelPosition`. `ng update` to `17.0.0` will automatically migrate this for you.
  • `IgxSwitchComponent`
  • **Breaking Change** `IChangeSwitchEventArgs` is now `IChangeCheckboxEventArgs`. `ng update` to `17.0.0` will automatically migrate this for you.
  • **Breaking Change** `SwitchLabelPosition` is now `LabelPosition`. `ng update` to `17.0.0` will automatically migrate this for you.
  • `IgxCombo`
  • **Breaking Change** `IComboSelectionChangingEventArgs` properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to reflect their function better. Just like Combo's `value`, those will emit either the specified property values or full data items depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`.
  • `IComboSelectionChangingEventArgs` exposes two new properties: `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.

Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.

  • **Breaking Change** - `IComboSelectionChangingEventArgs` properties `added` and `removed` now always contain data items, regardless of `valueKey` being set. This aligns them with the updated `newSelection` and `oldSelection` properties, including the same limitation for remote data as described above.
  • `IgxSimpleCombo`
  • **Breaking Change** - `ISimpleComboSelectionChangingEventArgs` properties `newSelection` and `oldSelection` have been renamed to `newValue` and `oldValue` respectively to reflect their function better. Just like Combo's `value`, those will emit either the specified property value or full data item depending on whether `valueKey` is set or not. Automatic migrations are available and will be applied on `ng update`.
  • `ISimpleComboSelectionChangingEventArgs` exposes two new properties: `newSelection` and `oldSelection` in place of the old ones that are no longer affected by `valueKey` and consistently emit items from Combo's `data`.

Note: In remote data scenarios with `valueKey` set, selected items that are not currently part of the loaded data chunk will be emitted a partial item data object with the `valueKey` property.

  • **Breaking Change** The `value` and `selection` properties now correctly return a single value or data item instead of the same wrapped in array and `undefined` instead of empty array, matching the values emitted from selection event and when working with `formControlName`/`ngModel` directives.
  • `IgxCombo`,`IgxSimpleCombo`
  • **Breaking Change** The `displayValue` property now returns the display text as expected (instead of displaying values in array).

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:

In Addition

Follow Ignite UI for Angular on Medium to stay up to date and learn about the latest Angular-related projects we are working on. Give us a star on GitHub and help us continue improving our product by addressing any concerns, questions, or feature requests in the issues section.

Ignite UI for Angular