ngOnChanges() and ngDoCheck() are Angular lifecycle hooks that detect and respond to changes in component data. ngOnChanges() automatically runs when @Input() values change, while ngDoCheck() allows developers to perform custom change detection logic beyond Angular’s default mechanism.
What is the purpose of ngOnChanges() and how does it differ from ngDoCheck()?
Preparing for interviews?
Use guided tracks for structured prep, then practice company-specific question sets when you want targeted interview coverage.
Quick Answer
Answer
Overview
Angular provides lifecycle hooks that allow developers to tap into the change detection process and respond to data updates. Two important hooks for monitoring data changes are ngOnChanges() and ngDoCheck(). Both help in detecting changes to component state, but they serve different purposes and operate at different levels of precision.
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 |
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.
Similar questions
Guides