In continuation with the renaissance that started with the previous version16 with features such as signals, hydration, standalone api’s etc, the Angular team is working with full momentum for the past two releases to add new features that will help angular catch up with rest of the frameworks. These new features will bring in improved performance and developer experience with faster builds and runtime. Let’s look into these new features and the benefits they offer.

New branding and a new site.

The traditional red logo is replaced with a modern looking colorful logo while the shield shape is kept intact.

Along with the new branding, Angular has also found a new home angular.dev for documentation and development. This new beta site will offer developers with new embedded tutorials built on WebContainers which provides a way to run both the tutorial and the code side by side on a web browser. The new site also provides a playground to explore Angular’s latest features directly in a browser. Angular will continue to stabilize this new site by collecting feedback and is planning to make this beta site its official home for future releases.

Built-in control flow

One of the most significant changes in this release is the introduction of the new control flow in templates. This change has come on the back of running user studies and feedback where lot of developers where struggling with the existing structural directives *ngIf, *ngFor and *ngSwitch. The syntax of the new structure is closer to other programming languages like javascript and python and is based on the block structure. Each block starts with @ and this change impacts the three most widely used structural directives ngIf, ngFor and ngSwitch. The existing structural directives are not deprecated and can coexist along with the new control flow syntax. This new built in control flow is available under developer preview as of now and Angular has provided a command for automated migration of the components to the new flow.

Deferred loading

Another important feature is the introduction of the lazy-loading structure called defer. Just like lazy loading of modules is done at an application level, defer can be used to load sections of a page at the component level. Using this mechanism, loading of certain sections of the page can be defined or delayed based on conditions. This significantly improves the applications load time and performance.

Defer comes with below options.

@defer – Defines the logical condition when the contents of the block should load.

@placeholder – Specifies the content displayed by default until the content to be loaded asynchronously is activated.

@loading – Specifies the content displayed when dependencies are being loaded.

@error – Specifies the content displayed when deferred loading failed.

Signals

The new change detection mechanism which was provided as a developer preview in previous version has now been graduated to a stable release. The latest release still supports the zone.js based change detection for backward compatibility and interoperability. Angular is working to add more features to further improve developer experience on change detection in future releases.

New application builder

Angular had two different builders to build the two different types of applications – client side rendering and server side rendering applications. Angular16 had introduced esbuild under developer preview which used vite for both dev-server and the build. With Angular 17, a brand new builder has been introduced which allows  you to build both the client-side and server-side rendering application. As per Angular, this feature has led to up to 87% faster builds for hybrid rendering applications and 67% faster builds for client side rendering applications.

Other changes that are noteworthy

• From version17 onwards, the minimum compatible version for Node is 18.13.
• From version17 onwards, the minimum compatible version for TypeScript is 5.2.
• Addition of a styleUrl attribute to the @Component decorator, which accepts a string value with a single path to the style file.
• Angular DevTools has been enhanced with the ability to view the hierarchy of injectors and dependency resolution path, which significantly improves developer experience during the debugging process.
• Better support for internationalization and accessibility.
• Support for View Transitions API which makes it easier to animate transitions between different pages in your application for better user experience.
• Ivy compiler improvements: The Ivy compiler which was first introduced in Angular 12 will include a number of improvements which will make it even faster and more efficient.

Conclusion

The upgrade to Angular17 is significant as it has delivered some of the features that were long due and requested from the Angular Dev community. These features will hold Angular in good competitive space against the other UI frameworks. As Angular developers, it’s an opportunity for us to make use of these features and be part of the Angular renaissance.