easyFrontend

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

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

**Core concept.** ** ngOnChanges ** is a lifecycle hook that executes when any @Input bound property changes. It receives a ** SimpleChanges ** object containing the current and previous values of the changed inputs. This hook runs before ngOnInit and on every subsequent change of an input property. Input bound ngOnChanges <text class='d-text' x='395'

428 views

Understand the problem

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

lifecycleinputs

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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++;
    }
  }
}

Join the discussion

Discussion (0)

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

What is Angular and how does it differ from AngularJS?

How do child components emit events to parents?