Change Detection Basics (Why the UI Updates)

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:

<p>{{ calculateTotal() }}</p>

If calculateTotal() is heavy, it can slow rendering.

Better approach

Compute once, store the result:

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.