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.

Stuck? AI Nudge Available

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

03

Study the solution

The solution is waiting

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

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.