VisaSpark
Sign in
intermediate15 min

Change Detection Basics

The conceptual model of when and how Angular updates the DOM after a state change.

What you'll learn

  • Explain what triggers Angular's change detection at a conceptual level
  • Describe why an @Input value changing in a parent updates the child's template
  • Recognize that change detection, not manual DOM manipulation, is how Angular keeps the view in sync

Explanation

Change detection is the mechanism Angular uses to notice when a component's data has changed and re-render only the affected parts of the template -- you never manually touch the DOM to keep it "in sync" with your component's state, the way you might with plain JavaScript.

Conceptually, change detection runs after events Angular is aware of: a user interaction (a click, an input), an HTTP response arriving, a timer firing. After any of these, Angular walks the component tree checking whether any bound values have changed since the last check, and updates only the DOM nodes whose bound values actually changed -- not a full re-render of everything.

This is why, from earlier lessons, setting this.count = this.count + 1 inside a click handler is enough to update {{ count }} in the template -- you never call anything like document.getElementById(...).textContent = ... yourself. The same mechanism is why an @Input property changing in a parent automatically updates whatever the child component's template does with that value.

This is intentionally a conceptual overview -- change detection strategies (default vs. OnPush, a real performance-tuning topic) are beyond this fundamentals course's scope, but knowing the basic model (Angular notices changes and re-renders affected bindings, you don't manually manipulate the DOM) is essential to reasoning about any Angular code.

Guided lab

Predict: What triggers a re-check vs. what doesn't

AngularNot executed
This lab does not run in your browser or on VisaSparkSchools's servers. Read the code, predict what it does, then reveal the real expected output.

This models change detection conceptually as a function that only re-renders bindings whose values actually changed. Predict which lines print 're-rendered'.

function renderIfChanged(label: string, previous: number, current: number): void {
  if (previous !== current) {
    console.log(`${label}: re-rendered (${previous} -> ${current})`);
  } else {
    console.log(`${label}: no change, skipped`);
  }
}

renderIfChanged("count", 3, 4);
renderIfChanged("name", 5, 5);
renderIfChanged("total", 10, 25);

Stuck? Get a hint.

Common mistakes

  • Manually manipulating the DOM (e.g. via document.querySelector) to reflect a state change, instead of just updating the component property and letting change detection handle the view.
  • Assuming a template updates immediately and synchronously the instant a property is set, rather than understanding it happens through Angular's change detection pass.
  • Not realizing an @Input property change in a parent is exactly what triggers the child's template to re-render that binding.

Knowledge check

Knowledge check

1. What does Angular's change detection do after an event it's aware of?
2. How do you typically update a template's displayed value in Angular?
3. What triggers a child component's template to reflect a new @Input value?

Takeaway

Update component properties directly and let Angular's change detection handle re-rendering -- never manually manipulate the DOM to reflect state changes.

Summary

Change detection is Angular's mechanism for noticing data changes and updating only the affected DOM bindings, running after events like clicks, HTTP responses, and timers.

References

Your notes

Notes save automatically.

Finished this lesson?

Mark it complete to track your progress and schedule a future review.

Next: Services and Dependency Injection →