hardFrontend

How does change detection work in Angular?

Q: How does change detection work in Angular?

## Change detection (CD) Angular keeps the DOM in sync with component state by running **change detection**: after any async event (clicks, timers, HTTP, promises — caught by **Zone.js**), it walks the **component tree top-down** and re-evaluates each template's bindings, updating the DOM where values changed. Root Child A Child B (OnPu

969 views

Understand the problem

Explain change detection and OnPush.

change-detectionperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

OnPush change detection

Run Playground

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

@Component({
  selector: 'app-root',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '<p>count: {{ count }}</p><button (click)="bump()">+1</button>',
})
export class AppComponent {
  count = 0;
  // OnPush still re-checks on an event it handles (this click), an @Input ref
  // change, or an async pipe emission -> fewer checks than Default.
  bump() { this.count = this.count + 1; }
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you build a custom form control by implementing the ControlValueAccessor interface?

How does compilation work under the hood in Ivy?