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

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.

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.

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:

• Discord channel
• GitHub discussions
• Roadmap
• YouTube channel
• Twitter

In Addition

Follow Ignite UI for Angular on Mediumto 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.