With the release of Angular 20, the buzz around zoneless Angular applications has increased quite a bit. That’s because Zoneless is no longer an experimental feature, as it has been promoted to developer preview, the final step before becoming stable.

A world of Zoneless Angular code, according to AI

So, what is Zoneless? I’ve explained before that Angular relies on a library called Zone.js to perform change detection. The idea is that any event in the browser (such as a click, a Promise that resolves, a timeout going off, etc.) is “watched” by Zone.js, which then tells Angular “something happened, check your components”. The framework then checks all components for changes and updates the DOM accordingly (see change detection illustrated here). That’s the default mode for Angular change detection.

With Zoneless, we remove Zone.js from the equation. The library can be uninstalled. This means that Angular needs to rely on other triggers to perform change detection, and there are a few of them available:

  • A Signal value is updated. Angular knows all dependents of a Signal and would update all related components as a result.
  • An OnPush component receives a new input / output value. This will instruct Angular to verify the component.
  • An async pipe receives a new value from an Observable.
  • Your code calls ChangeDetectorRef.markForCheck() directly.

If you follow best practices on component architecture, use the async pipe everywhere (which, as a reminder, you can do), and start using Signals as much as possible, you are pretty much all set for Zoneless Angular.

You can also check out the official Zoneless guide for a lengthier explanation of the above.

My name is Alain Chautard. I am a Google Developer Expert in Angular, Microsoft MVP, and a consultant and trainer at Angular Training, where I help web development teams learn and become proficient with Angular / React / JavaScript.

If you need any help learning web technologies, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and Weekly Angular Newsletter to receive helpful weekly tips and updates about Angular.

Share.
Leave A Reply