Angular's Change Detection

An updated version including zoneless Change Detection is available at: https://youtu.be/54o9eSGjfW4 In this video, we delve into Angular's rendering behavior in version 17, examining how Angular responds to changes triggered by user interactions or tasks and how it updates the DOM accordingly. At the heart of this process is Angular's Change Detection mechanism, which operates seamlessly in its default state. However, there are scenarios where fine-tuning is necessary for improved performance, achieved by setting the Change Detection strategy to OnPush. While this can enhance performance, improper usage may result in certain DOM elements not receiving updates. Throughout the video, we explore these aspects, unraveling the intricacies of Change Detection and introducing "Local Change Detection," a feature introduced in Angular 17. 0:00 Introduction 0:40 Application Walkthrough 2:32 Default Change Detection 4:53 Change Detection Strategy OnPush 9:28 "Dirty Marking" via Property Binding 18:12 "Dirty Marking" via ChangeDetectorRef 21:10 "Dirty Marking" via Handled DOM Event 23:10 "Dirty Marking" via async Pipe 24:24 "Dirty Marking" via a Signal (Local Change Detection) 26:33 Summary & Farewell