Sign in
Skip to solution
hardFrontend

How does change detection work in Angular?

969 views
01

Understand the problem

Explain change detection and OnPush.

change-detectionperformance
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Angular uses Zone.js to know when async events occur, then walks the component tree checking bindings. The default strategy checks every component each cycle. OnPush restricts checks to when an @Input reference changes, an event fires in the component, or an observable bound with async emits — greatly reduc

Solution ready — 2 min read

Classified // press E to declassify

04

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; }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 89 of 121 decoded in the Angular track. One more won't hurt.

Back to track