Modern Change Detection

Video Description

Change Detection is the backbone of Angular, ensuring that your components stay in perfect sync with the DOM. Over the years, it has evolved significantly, culminating in one of the most exciting advancements: zoneless change detection, introduced in Angular 18. Though still experimental, its high demand has led companies to already adopt it in production—and even Google is rumored to use it as the default for new projects. Yet, despite its importance, Change Detection remains one of the most misunderstood aspects of Angular. It’s often surrounded by myths, like the idea that “it re-renders the entire DOM on every run.” Spoiler: that’s not true. In this video, I’ll take you on a deep dive to demystify how Angular’s Change Detection works. You’ll learn about key concepts like Local Change Detection, Hybrid Mode, and OnPush. I’ll also provide a sneak peek into the future of Angular with Signal Components. Through practical examples and clear explanations, you’ll gain insight into potential pitfalls, strategies for optimizing performance, and the latest advancements, like zoneless change detection. By the end, you’ll have everything you need to build performant Angular applications—and maybe even a newfound appreciation for the magic behind Change Detection. This video is a revised version of https://youtu.be/0PJPZ3rLqrY, updated with the latest knowledge and techniques. 0:00 0. Introduction 1:14 1. Change Detection with zone.js (Theory) 📘 7:45 2. OnPush Strategy (Theory) 📚 12:20 3. Change Detection with zone.js (Practice) 🎬 18:22 4. OnPush Issues - Asynchronous Tasks ⏳ 29:06 5. OnPush Issues - Mutable Property Binding ♻️ 31:24 6. Local Change Detection (Angular 17) 🎯 35:21 7. Zoneless Change Detection (Angular 18) 🚦 43:45 8. Future of Change Detection 🔮 47:21 9. Summary & Farewell Angular Architects offers a variety of workshops focused on Angular. Two upcoming public workshops where I’ll be the trainer are: - https://www.angulararchitects.io/en/training/professional-ngrx-advanced-state-management-best-practices/ - https://www.angulararchitects.io/en/training/professional-angular-testing-playwright-edition/