Interview answer drill

Use this Angular interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more Angular interview questions

What is the purpose of ngOnChanges() and how does it differ from ngDoCheck()?Frontend interview answer

HighIntermediateAngular

By FrontendAtlas Team · Updated Apr 19, 2026

Interview focus

This Angular interview question tests whether you can explain ngOnChanges vs ngDoCheck in Angular: input diffs, custom checks, and cost, connect it to production trade-offs, and handle common follow-up questions.

ngOnChanges vs ngDoCheck in Angular: input diffs, custom checks, and cost explanation without falling back to memorized docs wording
Lifecycle and Hooks reasoning, edge cases, and production failure modes
How you would answer the most likely Angular interview follow-up

Practice more Angular interview questions

Interview quick answer

ngOnChanges and ngDoCheck are both change-detection hooks, but they solve different problems. ngOnChanges reacts to @Input reference changes with SimpleChanges, while ngDoCheck is the expensive escape hatch for custom diffing when Angular's default checks are not enough.

Full interview answer

Change-detection boundary

ngOnChanges() is the automatic hook for @Input() reference changes, while ngDoCheck() is the escape hatch for custom change detection when Angular's default checks are not enough. The production difference is cost and precision: ngOnChanges tells you which inputs changed, but ngDoCheck runs frequently and should stay rare.

Worked example

If a parent replaces filters = { ...filters, page: 2 }, ngOnChanges receives a SimpleChanges entry and you can react precisely. If the parent mutates filters.page++ without changing the object reference, ngOnChanges will not help; only custom checking inside ngDoCheck or a safer immutable flow will catch it.

Rule of thumb

Prefer ngOnChanges for normal input-driven logic.
Reach for ngDoCheck only when you can explain the mutation or diff Angular will not catch.
Treat ngDoCheck as a cost center because it runs on every detection cycle.

ngOnChanges()
This hook is called automatically whenever the value of an @Input() property changes. It runs before ngOnInit() and receives a SimpleChanges object that contains the previous and current values of changed inputs.

TYPESCRIPT

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user-card',
  template: `<p>{{ user.name }}</p>`
})
export class UserCardComponent implements OnChanges {
  @Input() user!: { name: string };

  ngOnChanges(changes: SimpleChanges) {
    console.log('Previous:', changes['user'].previousValue);
    console.log('Current:', changes['user'].currentValue);
  }
}

In this example, ngOnChanges() automatically detects when the user input changes and logs the old and new values. It is especially useful when you want to react only to input-bound property changes.

ngDoCheck()
While ngOnChanges() only detects @Input() changes, ngDoCheck() is a more powerful hook that lets developers implement custom change detection logic. It runs during every change detection cycle, even if inputs haven’t changed.

TYPESCRIPT

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

@Component({
  selector: 'app-user-card',
  template: `<p>{{ user.name }}</p>`
})
export class UserCardComponent implements DoCheck {
  @Input() user!: { name: string };
  private oldName = '';

  ngDoCheck() {
    if (this.user.name !== this.oldName) {
      console.log('User name changed from', this.oldName, 'to', this.user.name);
      this.oldName = this.user.name;
    }
  }
}

In this example, ngDoCheck() manually checks for changes within the user object — something ngOnChanges() would not detect if only a property (not the object reference) changes.

Feature	ngOnChanges()	ngDoCheck()
When Triggered	When @Input() reference changes	On every change detection cycle
Scope	Tracks input-bound property changes	Can detect deep or custom changes
Performance	Lightweight	Can be costly if overused
Use Case	Reacting to @Input() updates	Implementing custom change tracking logic

Comparison between ngOnChanges() and ngDoCheck()

Performance Considerations

ngOnChanges() is more efficient since it only runs when input references change.
ngDoCheck() provides flexibility but should be used carefully, as it runs very frequently during change detection cycles.

Think of ngOnChanges() as Angular’s built-in observer for input updates, while ngDoCheck() is a manual magnifying glass — you use it when Angular’s default detection isn’t enough.

Summary

ngOnChanges() reacts to input-bound changes automatically.
ngDoCheck() allows for custom logic to detect complex or deep changes.
Both help maintain UI consistency but differ in granularity and cost.