The team behind Angular, a platform and framework for building single-page client applications using HTML or TypeScript, today announced the release of Angular v16, the framework’s largest release since the initial rollout of Angular.

Included in this release is a developer preview of a new reactivity model for Angular which provides improvements to both performance and developer experience. This preview is backward compatible and interoperable with the current system.

With the developer preview, users gain access to improved run time performance through a reduction of the number of computations that take place during change detection. It also provides a more simple mental model for reactivity which is geared at making it clear what the dependencies of the view are and what the flow of data through the app is.

Furthermore, the preview enables fine-grained reactivity, makes Zone.js optional in future releases, delivers computed properties without the need for recomputation in each change detection cycle, and offers better interoperability with RxJS by outlining a plan to introduce reactive inputs.

Angular 16 also brings improvements to server-side rendering for Angular with a developer preview of full app non-destructive hydration. With this, Angular no longer re-renders the application from scratch. 

The framework now looks up existing DOM nodes while constructing internal data structures and attaches event listeners to those nodes.

This offers users multiple benefits, including the absence of content flickering on a page for end users, better Web Core Vitals in certain scenarios, future-proof architecture to allow for fine-grained code loading, the ability to integrate with existing apps in a few lines of code, and the incremental adoption of hydration with the ngSkipHydration attribute in templates for components performing manual DOM manipulation.

Angular 16 also offers migration schematics and a standalone migration guide to support developers as they move their apps to standalone APIs.

Developers can access this by running “ng generate @angular/core:standalaone” and the schematics will convert the code and remove extra NgModules classes, changing the bootstrap of the project to utilize standalone APIs.

Users also gain access to several new features with this release, such as: 

  • The ability to mark an input as required 
  • The ability to pass router data as component inputs
  • CSP support for inline-styles 
  • A more flexible ngOnDestroy 
  • The option to use self-closing tags for components in Angular templates 

To learn more, read the blog post.