This article is part of my “Angular Performance Week” series, where I publish a new video each day based on the performance articles on web.dev/angular. Angular is fast, but we can make it even faster. One way is by tuning its change detection system. Let’s see how.

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them :thumbsup:

Angular Performance Series

1. Route Level Code Splitting
2. Preload Lazy Routes in Angular
3. Performance budgets with the Angular CLI
4. Optimize Angular’s Change Detection
5. Virtual Scrolling for large lists with the CDK
6. Precaching with the Angular Service Worker

Don’t miss the other videos by subscribing to my newsletter.

Optimize Angular’s Change Detection

Change Detection is the magic behind Angular that automatically recognizes when changes happen. That’s either due to manual triggering or through asynchronous events. Once a change is detected, it iterates through the various Angular Components and triggers a refresh. Usually it is very fast, however - especially in larger apps - it might trigger lots of computations and thus block the main browser thread. In this lesson we’re going to learn how to optimize Angular’s change detection mechanism by reducing the amount of components it needs to update and via pure pipes.

Youtube

Original web.dev article

Wanna read the original web.dev article? Check it out here!.