Angular Academy · Lesson

ngOnChanges and Input Changes

React to changes in input properties.

ngOnChanges and Input Changes is a free Angular Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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.

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.

Frequently asked questions

Is the “ngOnChanges and Input Changes” lesson free?

Yes — the full text of “ngOnChanges and Input Changes” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

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; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

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