Angular 16. What’s new?

With each version of Angular a lot new features are introduced. v16 is scheduled to be released in May 2023 and I’ve been looking forward to many such features which are being discussed quite a lot in the community.

Signals

Signals are a new way of managing state changes in Angular applications, inspired by Solid.js. This is based on Push/Pull pattern and like the name suggests, pull allows you to retrieve the value and push allows you to set a new one or to mutate it.

In version 16 of Angular, the pattern base API will be integrated and will allow to get more performance in the way Angular handles change detection ( this is how zone.js handles changes in components and their effect on DOM ).

What problem did it solve?

Following article has a more detailed discussion on why Angular Signals is being proposed .

Signals. What new does it bring to Angular ?

How this works?
Do read following article how internally signals is going to solve this issue.

How Angular Signals Solves an Age-Old Problem.

Reactivity Model and Zone.js (Zoneless)

One of the most anticipated features of Angular v16 is the revisiting of the reactivity model and making Zone.js optional to improve runtime performance. Zone.js is a library that monkey-patches browser APIs to detect changes and trigger change detection in Angular applications. While this makes Angular easy to use and write, it also adds some overhead and complexity to the framework. In Angular v16, Zone.js will be optional, meaning developers can opt out of it and use other ways of managing reactivity, such as RxJS or signals.

Do visit Reactive Angular. At its core — conference talk by Pawel Kozlowski

Required Input

A much-awaited feature for the community was the ability to make certain inputs required.

Until now, there have been several workaround used to achieve this:

• raise an error in the NgOnInit Lifecycle if the variable was not defined
• modify the selector of our component to include the different inputs that were mandatory.

These two solutions had their advantages but also their disadvantages.

From version 16, making an input required will be a simple configuration object to be passed to the metadata of the input annotation.

@Input({ required: true }) name!: string;

Route Param Mapping being Automated

export const routes: Routes = [
 { path: 'search:/id',
   component: SearchComponent,
   resolve: { searchDetails: searchResolverFn }
 }
]

Before Angular 16, it was mandatory to inject the ActivatedRoute service to retrieve the url parameter but also the query parameters or the data associated to this url.

@Component({...})
export class SearchComponent {
  readonly #activateRoute = inject(ActivatedRoute);
  readonly id$ = this.#activatedRoute.paramMap(map(params => params.get('id');
  readonly data$ = this.#activatedRoute.data.(map(({ searchDetails }) => searchDetails)
}

With Angular 16 it will no longer be necessary to inject the ActivatedRoute service to retrieve the various route parameters because these can be directly binded to component inputs.

To activate this functionality, for an application that uses the module system, the option to activate is in the RouterModule options.

RouterModule.forRoot(routes, { bindComponentInputs: true })

For a standalone application, this is a function to call.

provideRoutes(routes, withComponentInputBinding());

Once the functionality is activated, the component is very simplified.

@Component({...})
export class SearchComponent {
  @Input() id!: string;
  @Input() searchDetails!: SearchDetails
}

More Cleanup Logics using takeUntilDestroyed and DestroyRef

V16 is coming up with two operators which are replacement for ngOnDestroy lifecycle hook. Because ngOnDestroy is tied to classes, we can’t use it in functions, if ever we want to. This feature is applicable to components, directives, pipes, embedded views, and instances of EnvironmentInjector.

@Component({})
class SampleComponent {
  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    
    });
  }
}

takeUntilDestroyed operator can only be used in constructor context. To use it outside constructor we need to pass destroyRef as an argument.

Vite as Dev Server

With the arrival of Angular 14 has been introduced the possibility to use a new Javascript Bundler: EsBuild

This new Bundler has the ability to be very fast and could reduce the build time by about 40%. The main problem is that this new feature and performance gain could only be used for a build and not during development (dev server).

In the next release of Angular, Esbuild can also be used during development thanks to Vite. To activate this feature in the angular.json file update the builder like this:

"architect": {
 "build": {
  "builder": "@angular-devkit/build-angular:browser-esbuild",
     "options": { ... }

NOTE : This functionality is still experimental.

Non-Destructive Hydration

Hydration in web development refers to 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. This reduces the time-to-interactive (TTI) and improves SEO and accessibility. Hydration has been available in frameworks like React or Next.js for a while, but it was not easy to implement in Angular. In Angular 16, hydration will be supported out of the box, making SSR applications faster and smoother.

Do read following detailed analysis on what exactly is it and what is the roadmap for hydration improvements.

Angular Hydration Improvements: Revolutionizing Rendering for Enhanced Web Experiences

Conclusion

If you are an angular developer, or considering angular for your next project, knowing these new features are essential. Some of these are long standing features request from the community. Some features (signal, and SSR) bring Angular to par with other modern frameworks. These new features will undoubtedly change the way we code our Angular applications by making them less boilerplate, even more optimized and by opening the door to the integration of new technologies like vitest or playwright in a simpler way.

The version 16 of Angular is not yet released some api described in this article may still change. Nevertheless this gives you an idea of what you can expect from the next release of Angular.