Sign in
Skip to solution
hardFrontend

What does ChangeDetectorRef do?

1.1k views
01

Understand the problem

Explain manual change detection.

change-detectioncdr
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

ChangeDetectorRef lets you control detection manually: markForCheck() schedules a check up the tree (used with OnPush), detectChanges() runs it now, and detach()/reattach() exclude/include a component — useful for performance-critical or detached views.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

markForCheck with OnPush
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-clock',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ time }}',
})
export class ClockComponent {
  time = '';
  constructor(private cdr: ChangeDetectorRef) {
    // update from OUTSIDE Angular's normal triggers
    setInterval(() => {
      this.time = new Date().toLocaleTimeString();
      this.cdr.markForCheck();   // without this, OnPush won't re-render
    }, 1000);
  }
}
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 83 of 121 decoded in the Angular track. One more won't hurt.

Back to track