What Does Zoneless Angular Mean?

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.

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.

Article was originally published on Medium.