Angular Academy · Lesson

ngOnChanges and Input Changes

React to changes in input properties.

Lesson 2 of 413 steps

ngOnChanges and Input Changes is a free Angular Academy lesson on CoddyKit. This is lesson 2 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

Reacting to Input Changes

The OnChanges hook lets a component react whenever its @Input properties change. Angular calls ngOnChanges before ngOnInit and on every input update.

Implementing OnChanges

Implement the OnChanges interface and add a ngOnChanges method that receives a SimpleChanges object.

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

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnChanges {
  @Input() count = 0;
  ngOnChanges(changes: SimpleChanges): void {
    console.log(changes);
  }
}

The SimpleChanges Object

SimpleChanges is a map keyed by input name. Each entry is a SimpleChange with currentValue, previousValue, and firstChange.

ngOnChanges(changes: SimpleChanges) {
  const c = changes["count"];
  if (c) {
    console.log(c.previousValue, "->", c.currentValue);
  }
}

Detecting the First Change

The firstChange flag is true the first time an input is set. Use it to distinguish initialization from later updates.

ngOnChanges(changes: SimpleChanges) {
  if (changes["count"]?.firstChange) {
    console.log("initial value");
  } else {
    console.log("updated value");
  }
}

Reacting to a Specific Input

Always check that the key exists before reading it, since not every input changes on every cycle.

ngOnChanges(changes: SimpleChanges) {
  if ("userId" in changes) {
    this.reload(this.userId);
  }
}

Reference-Based Detection

ngOnChanges fires on reference changes for objects and arrays. Mutating an object passed as input will NOT trigger it.

// will NOT trigger ngOnChanges in parent-bound child:
this.config.theme = "dark";

// will trigger it:
this.config = { ...this.config, theme: "dark" };

Order with ngOnInit

On creation, ngOnChanges runs first (with initial inputs), then ngOnInit. After that, ngOnChanges runs again whenever inputs change.

Comparing Old and New Values

A common use is responding only when a value actually differs, for example reloading data when an id input changes.

ngOnChanges(changes: SimpleChanges) {
  const id = changes["userId"];
  if (id && id.currentValue !== id.previousValue) {
    this.fetchUser(id.currentValue);
  }
}

Typing for Safety

You can read values from changes or directly from the component property; after ngOnChanges the property already holds the current value.

ngOnChanges() {
  // this.count already updated here
  this.total = this.count * 2;
}

When Not to Use OnChanges

For derived state from a single input, a getter or computed value may be cleaner. Reserve ngOnChanges for side effects that must run on input updates.

Multiple Inputs at Once

If several inputs change in the same cycle, ngOnChanges is called once with all of them present in the SimpleChanges map.

ngOnChanges(changes: SimpleChanges) {
  // both keys may be present
  if (changes["min"] || changes["max"]) {
    this.validateRange();
  }
}

Quick Check

Test your understanding of OnChanges.

Answer it in the interactive lesson

Recap

The OnChanges hook reacts to input changes via a SimpleChanges map of currentValue, previousValue, and firstChange. It fires on reference changes, so use immutable updates.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “ngOnChanges and Input Changes” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “ngOnChanges and Input Changes”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

What will I learn in “ngOnChanges and Input Changes”?

React to changes in input properties. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

How long does the “ngOnChanges and Input Changes” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy