Sign in
Skip to solution
easyFrontend

What is the purpose of ngOnChanges and how does it capture changes in @Input properties?

428 views
01

Understand the problem

Explain the ngOnChanges hook, SimpleChanges parameter, and its execution order.

lifecycleinputs
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

ngOnChanges fires whenever inputs bound via property binding change. It receives a SimpleChanges object mapping input names to their previous and current values. It runs before ngOnInit and on every subsequent input value mutation.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Capturing input changes with ngOnChanges
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-user-detail',
  standalone: true,
  template: '<p>User: {{ userId }} (Total changes: {{ changeCount }})</p>'
})
export class UserDetailComponent implements OnChanges {
  @Input() userId!: number;
  changeCount = 0;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['userId']) {
      const current = changes['userId'].currentValue;
      const previous = changes['userId'].previousValue;
      
      console.log('userId changed from ' + previous + ' to ' + current);
      this.changeCount++;
    }
  }
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 8 of 121 decoded in the Angular track. One more won't hurt.

Back to track