What’s New in Angular 16: Deep Dive into Latest Features of Angular 16

Last Updated on December 29, 2023

Quick Summary:

The Angular Team at Google never leaves a stone unturned to turn up the excitement levels for the developer community at Angular. Therefore, continuing their traditional release frequency of a major update every six months, the next version of the popular Angular framework is here. However, if you are a business owner or a developer wondering what is the latest version of Angular? The answer is here because Team Angular has released the latest Angular version with significant advancements in reactivity, server-side rendering, and tooling. In this blog post, we have covered a consolidated in-depth overview of the Angular v16 Features and Updates brought for you with the Angular 16 release.

Introduction

The latest release of the popular frontend framework Angular has been introduced by the Google team, with the Angular 16 release date on May 3, 2023. According to Minko Gechev, Angular v16 is considered significant and the largest release since its initial launch. While we previously covered the impressive changes in Angular 15 in our last blog, the stakes are even higher this time with the latest Angular version. Angular Team has stepped up to the challenge, and this latest version of Angular in 2023 has delivered impressive features and updates for all, including developers, business owners, and tech enthusiasts.

What’s New in Angular 16 Features and Updates

The Angular v16, has joined the Angular revolution with its latest improvements and updates making it even better and more efficient for the developer community and tech enthusiasts. This Angular version has addressed dozens of quality-of-life improvements across feature requests, with a combined total of over 2500 thumbs up on GitHub. Let’s take a closer look at what the latest version of Angular v16 has to offer:

Reactivity Revamped

Developer experience is of the utmost importance when it comes to web application development, and the new Reactivity Model initially intends to improve your developer’s performance and experience. A noteworthy advantage of this feature is that it is completely backward compatible and interoperable with the current system. Some of the benefits of this feature includes:

Improved runtime performance due to reduced computations during the change detection process.
A simpler mental model for reactivity that clearly defines the view’s dependencies and data flow throughout the application.
Fine-grained reactivity that allows for future releases to check changes only in affected components.
The ability to make Zone.js optional in future releases by using signals to notify the framework when the model has changed.
The delivery of computed properties without the penalty of recomputation in each change detection cycle.
Better interoperability with RxJS through a plan to introduce reactive inputs.

All of these improvements enhance the performance and ease of use of the Angular framework for your developers and provide greater flexibility for future updates.

Reactivity Model and Zone.js
One highly anticipated feature of Angular v16 is the reworked reactivity model, which allows developers to improve runtime performance by making Zone.js optional. This allows developers to choose other reactivity management methods, like RxJS or signals.

For those unfamiliar with Zone.js, it is a library that modifies browser APIs to detect changes and trigger change detection in Angular applications. While it simplifies Angular development, it adds some overhead and increases the framework’s complexity.

Angular Signals (Developer Preview)

Signals are the latest feature that enables you to manage state changes within Angular applications. Inspired by Solid.js, Signals are functions that return a value using the get() method and can be updated by calling them with a new value using the set() method.

Signals also enable the creation reactive value graph that automatically updates dependencies as they change and can be combined with RxJS observables, still supported in the Angular latest version, to create powerful and declarative data.

Ngcc or Angular Compatibility Compiler Removed

With the Angular v9 update, the core team at Angular moved from the old view engine to Angular’s next-generation compilation and rendering pipeline, Ivy. The ngcc was introduced to support the libraries based on the old view engine. In the latest version 16 of Angular, the ngcc and all other view engine-related codes have been removed, reducing the angular bundle size. Additionally, the Angular View Engine libraries can no longer be used in v16+. Though these libraries were not officially supported but are a hard break in compatibility. This completes the transition of Angular from View Engine to Ivy complete.

Bind router Information to Component Inputs

This feature allows the following router data to be directly available in the component as input. Therefore, instead of using ActivatedRoute to get these values, we can use inputs that can potentially remove many boilerplate codes from our application to bind Router information to component inputs.

Router Data | Resolved Router Data | params | queryParams

// Current approach, which would still work
@Component({
  ...
})
class SomeComponent {
  route = inject(ActivatedRoute);
  data = this.route.snapshot.data['dataKey'];
  params = this.route.snapshot.params['paramKey']
}

//New approach
@Component({
  ...
})
class SomeComponent {
  @Input() dataKey: string;
  @Input() paramKey: string;
  
  //or
  @Input() set dataKey(value: string){
    //react to the value
  };
  @Input() set paramKey(value: string){
    //react to the value
  };
}

takeUntilDestroyed and DestroyRef

Taking a step further to the more functional approach to writing code, With v16.0 Angular team has introduced DestroyRef and takeUntilDestroyed rxjs operator as the replacement for the ngOnDestroy lifecycle hook. The ngOnDestroy is tied to classes, so it cannot be used in functions.

@Component({})
class SomeComponent {
  destroyRef = inject(DestroyRef);
  store = inject(Store);
  user
  constructor() {
    const sub = this.store.select(getUser()).subscribe((user) => {
      this.user = user    
    });
    destoryRef.onDestroy(() => {
      sub.unsubscribe()
    })
    

    //OR

    const sub = this.store.select(getUser()).pipe(takeUntilDestroyed())
      .subscribe((user) => {
      this.user = user    
    });
  }
}

The takeUntilDestroyed operator can only be used in the constructor context. We need to pass destroyRef as an argument for using it outside the constructor. This feature helps clean up signal effects; therefore, no manual cleanup is required, unlike subscriptions in rxjs.

Esbuild dev server

Experimental support for ng build using Esbuild is already available. In the Angular 16 version, the team has introduced support for ng serve using Esbuild is also added. Though initially, it is experimental, several performance-related improvements and optimizations are yet to be made. Still, it offers a significantly faster startup time (approximately 2 times faster) than the webpack implementation.

To enable this we need to change “@angular-devkit/build-angular:browser” to “@angular-devkit/build-angular:browser-esbuild”

Required Component Inputs

The latest version of Angular has a notable feature that enhances the developer experience and code quality. With this feature, developers can mark certain inputs of a component as required, ensuring that the parent component provides them or throws an error. This feature helps catch bugs and typing errors simultaneously and ensures that components receive all the necessary data to function efficiently. Moreover, this feature helps to make components more self-documenting and easier to use.

Non-Destructive Hydration (Developer Preview)

The developer community often recognizes the process of converting server-side rendered HTML content into a fully interactive and functional web page on the client side by attaching JavaScript behavior and event listeners. Angular has partnered with the Chrome Aurora Team to improve the performance and developer experience of hydration and server-side rendering. While React and Next.js already had hydration support, it was a complex feature to implement in Angular. However, in the latest version of Angular, hydration is supported out-of-the-box, making SSR applications faster and smoother.

With full app non-destructive hydration, Angular doesn’t re-render the application from scratch but looks at existing DOM nodes while building internal data structures and attaches event listeners to those nodes. This latest roll-out brings benefits such as

no content flickering,
better Web Core Vitals,
future-enabled architecture,
easy integration with existing applications, and
incremental adoption of hydration with the ngSkipHydration attribute in templates for components performing manual DOM manipulation.

According to the official documentation, early tests show up to a 45% improvement in the Largest Contentful Paint with full app hydration.

Dependency Injection Debugging APIs

With this new functionality, it is possible to scrutinize and troubleshoot the dependency injection system in Angular apps. By utilizing these APIs, your development team can retrieve details on the providers, tokens, injectors, scopes, and instances related to your dependencies. Furthermore, these APIs can imitate diverse scenarios or examination cases for your dependencies.

Improved Documentation and Schematics for Standalone Components

This feature in the current Angular version 16 enables you to enhance your documentation and schematics and assists you in producing standalone components for your Angular applications. These standalone components are not affiliated with any specific module and can be utilized in any part of your application. Such components are advantageous in developing reusable UI elements or libraries.

Exploring options to improve JavaScript bundles created by Angular CLI

The feature examines various choices to enhance the JavaScript bundles generated by Angular CLI. These options include ES modules, tree-shaking, code-splitting, and differential loading. Their objective is to diminish the bundle size and enhance the loading speed of Angular applications.

Ready to upgrade your Angular application to the latest version?
Don’t let an outdated Angular version hold your application back. Hire our expert Angular developer to upgrade it to the latest version. Contact us now to schedule a consultation.

Other Features and Improvements

The standard features of Angular 16, combined with the abovementioned improvements, provide developers and tech enthusiasts with an enhanced experience and improved code quality for Angular applications. Some of the additional features and improvements included in Angular v16 are:

🟠 Built-in support for Tailwind CSS, a popular utility-first CSS framework that simplifies styling, enabling you to use pre-defined classes. This integration offers several benefits: faster development, consistent design, responsive design, and customizable and extensible styles.

🟠 Support for CSS Isolation, a feature that helps prevent conflicts between component styles by scoping them to specific elements. This can be achieved using either shadow DOM or emulated encapsulation, now supported in the current Angular version.

🟠 Improve Security and Prevent Cross-Site Scripting (XSS) Attacks, Angular latest version now supports native Trusted Types. This browser feature enforces strict rules on how strings are used in sensitive contexts, allowing for safer sanitization and rejection of unsafe strings.

🟠 Dynamic Imports of Router Data Feature, Easily bind router information to your component inputs without injecting the ActivatedRoute service. This can result in cleaner and simpler code.

🟠 Angular Material, a UI component library that follows the Material Design guidelines, now includes a new date range picker component in Angular 16. This component lets you easily select start and end dates from a calendar, enhancing your web application’s functionality and user experience.

Conclusion

The latest updates and improvements from the Angular Team at Google are truly impressive, and they are sure to please developers, tech enthusiasts, and the wider community. With the release of Angular 16, the latest features and updates bring about the most significant changes. Reactivity, hydration, and signals are just a few enhancements demonstrating the team’s dedication to improving code efficiency and the overall developer experience. These include improvements to reactivity, hydration, signals, and much more. But the best part is that even greater updates and improvements are on the horizon as the Angular Team continues to innovate and push the boundaries of what is possible.

So, if you’re a product owner looking to build your next project with Angular, hire an AngularJS developer and unlock the full potential of this powerful framework. Take advantage of the benefits of the latest Angular 16 update to your web application development in the long run.