Angular v18 Release: New Features and Improvements

Abstract

Angular v18 is a significant release that introduces various new features and improvements to enhance the developer experience and performance of Angular applications. The highlights include optional zones, server-side rendering and hydration enhancements, Angular Material 3 support, signal-based APIs, and more. This release aims to prepare Angular for the next decade of web development while maintaining stability and reliability.

Detailed Summary

Optional Zones and Reactivity System Redesign

One of the major focuses of Angular v18 is the redesign of the reactivity system, with the goal of making Zone.js optional for Angular applications. Zone.js, while providing a hands-off approach to reactivity, has shown some weaknesses as applications scale, such as performance challenges and debugging difficulties.

Angular has introduced three new reactive primitives: Signal, Computed, and Effect, which are at the heart of the new reactivity model.
Signal and Computed are now stable APIs, and integrations with popular state management libraries like NgRx, NGXS, and RxAngular have been developed.
In v18, Angular introduces "hybrid change detection" by default, allowing Angular to listen to signals and other notifications about changes, even if Zone.js doesn't patch an API or changes are made outside the Angular zone.
An experimental API is available to disable Zone.js integration entirely and run applications in a fully zoneless mode, although not all parts of Angular work smoothly with zoneless mode yet.
Future plans include a full developer preview of zoneless mode, including compatibility with Angular's own packages and popular libraries in the ecosystem, as well as integrating signals with core framework components like forms and router.

Server-Side Rendering (SSR) and Hydration Improvements

Angular v18 brings several enhancements to the server-side rendering and hydration experience:

Enhanced DevTools support for hydration, allowing developers to visualize hydration information, identify which components were hydrated, skipped, or encountered errors.
Hydration support for all Angular Material Components, enabling performance benefits of hydration for applications using Angular Material.
Hydration support for i18n blocks (in developer preview).
Event Replay powered by JsAction, capturing and replaying user events before an application is hydrated.
Ongoing work includes out-of-the-box support for selecting rendering modes (client-side, server-side, or build-time) per route and improving the Static Site Generation (SSG) experience for parameterized routes.

Angular Material 3 Support

Angular v18 introduces stable theming APIs for Material Design 3 (M3), allowing developers to use the same components with an updated visual style based on Material Design 3:

Simplified theme styles based entirely on CSS variables without adding selector specificity.
More granular theme customizations based on CSS variables.
A more flexible API for applying color variants to components.
Both M2 (Material Design 2) and M3 themes are available, providing options for developers.
Future plans include extracting more Angular Material behavior into fully customizable CDK components for even greater flexibility.

Signal-Based APIs

Angular v18 introduces new signal-based APIs, bringing the framework closer to fully signal-based components:

Signal inputs allow values to be bound from a parent component and exposed as signals that can change during the component's lifecycle.
Model inputs enable a component to propagate new values back to another component, improving two-way binding.
Signal query APIs provide a type-safe, reactive way to interact with content children and view children in templates, offering benefits like predictable timing, improved type safety, and lazier updates.

Other Improvements

Support for TypeScript 5.4, including features like preserved narrowing enclosures, the NoInfer utility type, and more.
Developers can now provide a default value for ng-content, allowing placeholders for empty lists and components with no current content.
Angular Forms introduced a global observable to track changes around any abstract control and its children, including events like touched, dirty, value, and status changes.
Incremental improvements for removing zones, including zone coalescing enabled by default and zoneless-compatible Angular Material Components and CDK.

Angular v18 continues to evolve and improve the framework, providing developers with the tools and features needed to build robust and scalable web applications. With a focus on performance, developer experience, and preparing for the future of web development, this release sets the stage for the next generation of Angular applications.