Angular Change Detection

What is Change Detection in Angular?

Change detection is the process Angular uses to check whether component data has changed and update the DOM. By default it runs a check across the component tree after any asynchronous event — a click, a timer, an HTTP response.

Why Change Detection matters

Understanding when checks run explains both the framework’s convenience and its performance traps: a method called in a template runs on every cycle, and an application with thousands of bindings can spend real time in these checks.

Change Detection example

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';

@Component({
  selector: 'app-job-card',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<h3>{{ job.title }}</h3>`,
})
export class JobCardComponent {
  @Input() job!: Job;
}

How this works

With OnPush, Angular re-checks this component only when an input reference changes, an event fires inside it, or an async pipe it uses emits. Mutating the job object in place will not update the view — the parent must pass a new object.

Key points to remember

• Default strategy: check every component on every cycle.
• OnPush: check only on input reference change, internal events, or async pipe emissions.
• Zoneless change detection with signals is the direction modern Angular is moving.
• Avoid calling functions in templates — they run on every check.

Common mistakes with Change Detection

• Mutating an object passed to an OnPush child and seeing no update.
• Using getters or method calls for computed template values instead of a signal or a stored property.