Angular 16 previews new reactivity model

Angular 16, the latest iteration of Google’s popular TypeScript-based web development framework, has arrived as a production release, previewing a new reactivity model that promises significant improvements in both performance and developer experience.

Published May 3, Angular 16 can be found on GitHub, with several developer previews highlighted in multiple aspects of the framework. The new reactivity model is backward-compatible and interoperable with the current system, while offering better runtime performance by reducing the number of computations during change deflection, said Minko Gechev, of the Google Angular team, in a blog post. The model offers a simpler mental model for reactivity, making clear what the dependencies are of the view and the flow of data through the app. Fine-grained reactivity allows for checking changes only in affected components.

For server-side rendering, Angular 16 includes a developer preview of full app non-destructive hydration, whereby Angular no longer re-renders the application from scratch. The framework instead looks up existing DOM nodes while building internal data structures and attaches event listeners to these nodes. Among the benefits are no content flickering on a page for users, easy integration with existing apps, and a future-proof architecture that enables fine-grained code loading with primitives due later this year.

As part of the Angular 16 release, ng add schematics for Angular Universal have been updated, enabling developers to add server-side rendering to projects using standalone APIs. Support for stricter content security policy for inline styles also was introduced. Next steps eyed for hydration and server-side rendering include partial hydration, which involves delaying the loading of JavaScript that is not essential for the page and hydrating associated components later.

Also in Angular 16:

• The esbuild-based build system also enters developer preview, with early tests showing a 72% improvement in cold production builds.
• The Angular Signals library lets developers define reactive values and express dependencies between them.
• Developers will be able to easily “lift” signals to observables from @angular/core/rxjs-interop, in developer preview as part of Angular 16.
• New projects can be created as standalone from the start, via a developer preview of standalone schematics.
• Experimental support is being introduced for the Jest testing framework.
• Developers can specify a nonce attribute for styles of the components that Angular inlines.
• Self-closing tags can be used for closing tags for components in Angular templates.
• For the router, Angular 16 adds the ability to bind route parameters to the corresponding component’s inputs, to improve the developer experience.
• TypeScript 5.0 is supported, highlighted by ECMAScript decorators to extend JavaScript classes.

Angular 16 follows the Angular 15 release, which was unveiled as a production release in November 2022. Angular 15 stabilized APIs for building applications without using NgModules.