What does ChangeDetectorRef do? | Interview Question

Q: What does ChangeDetectorRef do?

**Target Audience:** Developers who know what a component is and want to control when its view updates — no internals knowledge assumed. **Difficulty:** Medium > **How to read this doc:** Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. The method list was read from the Angular 22.2.3 typings, and every DOM snapshot below was produced by compiling and running the example on 22.2.3. ## 1. Why This Even Matters — A Story First Think of a restaurant where the waiter only walks over to a table when the table raises a little flag. Most of the time that is perfect: no hovering, no wasted trips. Now a guest quietly finishes their soup without raising the flag. The waiter never comes. The empty bowl sits there. To fix it you have two options: **raise the flag** for the guest so the waiter stops by on the next round, or **grab the waiter by the arm** and make them deal with this table right now, before doing anything else. In A

The problem

Question presented to candidate: "You inject ChangeDetectorRef into a component. What can it do, when would you reach for markForCheck() versus detectChanges(), and why do you need it less in a signals-based Angular 22 app?"

What a strong answer should cover:

ChangeDetectorRef is the handle to one component's view in the change detection tree; in v22 its public API is exactly four methods: markForCheck, detectChanges, detach, reattach.
markForCheck() flags the view and its ancestors and lets the scheduler run later (asynchronous); detectChanges() checks this view and its children right now (synchronous), whether or not anything is flagged.
detach() removes the view from the tree so normal runs skip it even when marked; detectChanges() still works on a detached view, which enables manual, throttled rendering.
Under the v22 defaults (OnPush, zoneless) a plain field changed in async code needs one of these; a signal needs neither, and AsyncPipe calls markForCheck() internally.
checkNoChanges() was removed from the public ChangeDetectorRef API in v22; tests use fixture.detectChanges() instead.

Clarifying questions expected:

"Is the state in signals already, or is this legacy code with plain fields and Observables?"
"Is the goal to fix a stale view, or to deliberately throttle rendering of a hot component?"

Code / implementation expected: Yes — show markForCheck() and detectChanges() updating a stale OnPush view, and detach() blocking normal updates.

change-detection
cdr

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers who know what a component is and want to control when its view updates — no internals knowledge assumed. Difficulty: Medium

How to read this doc: Plain language first, then 📌 Interview term: callouts with the vocabulary an interviewer expects. The method list was read from the Angular 22.2.3 typings, and every DOM snapshot below was produced by compiling and running the example on 22.2.3.

1. Why This Even Matters — A Story First

Think of a restaurant where the waiter only walks over to a table when the table raises a little flag. Most of the time that is perfect: no hovering, no wasted trips.

Now a guest quietly finishes their soup without raising the flag. The waiter never comes. The empty bowl sits there. To fix it you have two options: raise the flag for the guest so the waiter stops by on the next round, or **grab the waiter by th

The solution is hidden so you can try first

8 min read · 9 sections

Read the code

AngularmarkForCheck vs detectChanges vs detach on an OnPush component with a plain field

Open in playground

import { ChangeDetectorRef, Component, ViewChild, inject, signal } from "@angular/core";

// A separate log component: its signal re-renders only this view,
// so it never refreshes the counter by accident.
@Component({
  selector: "event-log",
  template: `<ol>@for (line of lines(); track $index) { <li>{{ line }}</li> }</ol>`,
})
export class EventLog {
  lines = signal<string[]>([]);
  add(line: string) { this.lines.update(l => [...l, line]); }
}

// OnPush is the v22 default, and count is a PLAIN field, not a signal.
@Component({
  selector: "plain-counter",
  template: `<p id="count">count: {{ count }}</p>`,
})
export class PlainCounter {
  count = 0;
  cdr = inject(ChangeDetectorRef);
  shown = () => document.getElementById("count")!.textContent;
}

@Component({
  selector: "app-root",
  imports: [EventLog, PlainCounter],
  template: `
    <plain-counter #c />
    <button id="silent" (click)="later(c, 'silent')">++ in setTimeout</button>
    <button id="mark" (click)="later(c, 'markForCheck')">++ then markForCheck()</button>
    <button id="detect" (click)="later(c, 'detectChanges')">++ then detectChanges()</button>
    <button id="detach" (click)="toggle(c)">{{ attached ? "detach()" : "reattach()" }}</button>
    <event-log />
  `,
})
export class AppComponent {
  attached = true;
  @ViewChild(EventLog) log!: EventLog;

  later(c: PlainCounter, how: "silent" | "markForCheck" | "detectChanges") {
    // setTimeout: no template event is involved, so nothing marks the view dirty for us.
    setTimeout(() => {
      c.count++;
      if (how === "markForCheck") c.cdr.markForCheck();   // schedules a check, async
      if (how === "detectChanges") c.cdr.detectChanges(); // checks this view now, sync
      const now = c.shown();
      setTimeout(() => this.write(`${how}: field=${c.count}, DOM right after="${now}", DOM later="${c.shown()}"`), 20);
    });
  }

  toggle(c: PlainCounter) {
    this.attached ? c.cdr.detach() : c.cdr.reattach();
    this.attached = !this.attached;
    this.write(this.attached ? "reattached" : "detached");
  }

  write(line: string) { this.log.add(line); }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.