Change Detection Basics (Why the UI Updates)
Understand how Angular decides to update the screen, with simple rules and practical tips.
Change detection is Angular’s process of checking data and updating the UI when something changes. ## Simple rule Angular updates the UI when: - you click (events) - HTTP response arrives - timers fire - Observables emit - input values change ## Why this matters Sometimes developers call methods in templates and wonder why the page feels slow. That method can run many times. Example to avoid: ```html <p>{{ calculateTotal() }}</p> ``` If `calculateTotal()` is heavy, it can slow rendering. ## Better approach Compute once, store the result: ```ts total = 0; ngOnInit() { this.total = this.items.reduce((sum, x) => sum + x.price, 0); } ``` ## Pro tip Use: - `async` pipe - `trackBy` in `*ngFor` - keep templates simple > Next: New control flow syntax (@if, @for) and how it compares to *ngIf/*ngFor.