Angular › Change Detection

What is change detection in Angular and why does it exist?

Beginner

Answer

Change detection is the process Angular uses to check whether any data used in a component's template has changed, and if so, update the actual page to reflect the new values. It runs automatically whenever something happens, like a button click or data arriving from a server, keeping the screen in sync with your app's underlying data.

@Component({
  selector: 'app-counter',
  template: `<button (click)="count = count + 1">Count: {{ count }}</button>`
})
export class CounterComponent {
  count = 0; // Angular automatically updates the displayed count after the click
}

Real-world example A counter button automatically shows the updated number the moment it is clicked, since Angular's change detection notices the underlying value changed and refreshes just that piece of the page.

Common follow-ups: What triggers change detection to run in a typical Angular app?;How is change detection different from how React or Vue detect updates?

Angular Signals;Performance & Lazy Loading