Juri Strumpflohner Follow Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Angular Performance: Optimize Angular Change Detection

Angular is fast, but with your help it can be even faster!

Aug 29, 2019 2 min read

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 👍

Angular Performance Series

Route Level Code Splitting
Preload Lazy Routes in Angular
Performance budgets with the Angular CLI
Optimize Angular’s Change Detection
Virtual Scrolling for large lists with the CDK
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.

Original web.dev article

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

Questions? Thoughts? Hit me up on Twitter

Angular Performance: Optimize Angular Change Detection

Angular is fast, but with your help it can be even faster!

Angular Performance Series

Optimize Angular’s Change Detection

Original web.dev article

Angular Performance: Performance budgets with the Angular CLI

Learn how to set performance budgets using the Angular CLI

Angular Performance: Preloading Lazy Routes

Optimize runtime performance by preloading lazy routes

Angular Performance: Route Level Code Splitting

Learn about route-level code splitting and lazy loading with Angular