Angular › Lifecycle Hooks

What is the difference between ngOnChanges and ngOnInit, and when does each run?

Intermediate

Answer

ngOnChanges runs whenever one of a component's input properties changes, including the very first time it receives a value, and it receives an object describing exactly what changed. ngOnInit runs exactly once, right after the very first ngOnChanges call, making it the ideal place for one time setup logic rather than logic that needs to react to every future change.

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

export class UserCardComponent implements OnChanges {
  @Input() userId!: number;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['userId']) {
      console.log('userId changed to', changes['userId'].currentValue);
    }
  }
}

Real-world example A user profile component reloads its data every time the userId input changes, using ngOnChanges to detect exactly when that specific input updates, rather than only running once when the component first appears.

Common follow-ups: What is inside the SimpleChanges object passed to ngOnChanges?;Would using a signal input instead of a traditional Input make ngOnChanges unnecessary here?

Angular Signals;Data Binding