Angular's Change Detection

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