What is ngOnChanges() in Angular?

What is ngOnChanges()?

ngOnChanges() is an Angular lifecycle hook that Angular calls when one or more input properties of a component change.

It is mainly used when a parent component passes data to a child component, and the child needs to react whenever that input value changes.

Parent Component
      │
      │ Input changes
      ▼
Child Component
      │
      ▼
ngOnChanges()

The lifecycle interface is:

OnChanges

and the method is:

ngOnChanges(changes: SimpleChanges): void

Why do we need ngOnChanges()?

Suppose a parent passes a productId to a child:

<app-product-detail
  [productId]="selectedProductId">
</app-product-detail>

Initially:

selectedProductId = 10

Later the user selects another product:

selectedProductId = 20

The child may need to:

• Detect that productId changed.
• Know the previous and current values.
• Reload product details.
• Recalculate some data.
• Execute logic based on the new input.

This is where ngOnChanges() is useful.

Full Simple Sample Program

child.ts

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

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    <h3>Child Component</h3>
    <p>Name: {{ name }}</p>
  `
})
export class Child implements OnChanges {

  @Input() name = '';

  ngOnChanges(changes: SimpleChanges): void {

    if (changes['name']) {

      console.log(
        'Previous Value:',
        changes['name'].previousValue
      );

      console.log(
        'Current Value:',
        changes['name'].currentValue
      );

      console.log(
        'First Change:',
        changes['name'].firstChange
      );
    }
  }
}

app.ts

import { Component } from '@angular/core';
import { Child } from './child';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child],
  template: `
    <h2>Parent Component</h2>

    <button (click)="changeName()">
      Change Name
    </button>

    <app-child [name]="userName"></app-child>
  `
})
export class App {

  userName = 'Syed';

  changeName(): void {
    this.userName = 'Mohamed';
  }
}

Program Explanation

The parent contains:

userName = 'Syed';

It passes this value to the child:

<app-child [name]="userName"></app-child>

The child receives it:

@Input() name = '';

When Angular initially sets the input, ngOnChanges() runs.

Later, when the button is clicked:

this.userName = 'Mohamed';

Angular updates the child's input:

Parent
userName = "Mohamed"
       │
       ▼
@Input() name
       │
       ▼
ngOnChanges()

The child can now detect the change.

What is SimpleChanges?

SimpleChanges contains information about the changed input properties.

ngOnChanges(changes: SimpleChanges)

For our name property:

changes['name']

provides a SimpleChange containing important information.

previousValue

The old value:

changes['name'].previousValue

Example:

Syed

currentValue

The new value:

changes['name'].currentValue

Example:

Mohamed

firstChange

Indicates whether this is the first time Angular has set that input:

changes['name'].firstChange

Result:

true / false

You can also use:

changes['name'].isFirstChange()

Initial Call

An important interview point is that ngOnChanges() doesn't wait for the user to change the value manually.

It also runs when Angular initially sets the component's bound inputs.

So initially you might see:

Previous Value: undefined
Current Value: Syed
First Change: true

After clicking the button:

Previous Value: Syed
Current Value: Mohamed
First Change: false

Multiple Inputs

A component can have multiple inputs:

@Input() name = '';
@Input() age = 0;
@Input() city = '';

Then:

ngOnChanges(changes: SimpleChanges): void {

  if (changes['name']) {
    console.log('Name changed');
  }

  if (changes['age']) {
    console.log('Age changed');
  }

  if (changes['city']) {
    console.log('City changed');
  }
}

This lets you determine exactly which bound input changed.

ngOnChanges() vs ngOnInit()

Typical sequence:

Input assigned
     ↓
ngOnChanges()
     ↓
ngOnInit()
     ↓
Component running
     ↓
Input changes
     ↓
ngOnChanges()

Advantages

• Detects input property changes.
• Provides previous and current values.
• Can identify the first change.
• Useful for parent-to-child communication.
• Useful for reloading or recalculating data when an input changes.
• Can handle multiple changed inputs in one lifecycle callback.

Disadvantages / Limitations

1. Primarily for Angular-managed input changes

ngOnChanges() is designed to react to changes Angular applies to component inputs.

Changing an ordinary internal property does not cause ngOnChanges() to run.

2. Object mutation can be tricky

Suppose the parent passes:

user = {
  name: 'Syed'
};

If you only mutate:

this.user.name = 'Mohamed';

the object reference remains the same.

For change detection based on the input reference, it is generally preferable to create a new object:

this.user = {
  ...this.user,
  name: 'Mohamed'
};

3. Too much logic can make the component complicated

Large business logic should usually be delegated to services or other appropriate layers.

Key Points

1. ngOnChanges() is an Angular lifecycle hook.

2. It is defined by:

OnChanges

3. Method syntax:

ngOnChanges(changes: SimpleChanges): void

4. It is mainly used to react to input changes.

5. It can execute multiple times.

6. It also executes when Angular initially sets bound inputs.

7. SimpleChanges provides:

previousValue
currentValue
firstChange
isFirstChange()

8. During initial component creation:

ngOnChanges()
     ↓
ngOnInit()

9. ngOnInit() runs once, while ngOnChanges() can run repeatedly as inputs change.

Interview Questions and Answers

1. What is ngOnChanges()?

ngOnChanges() is an Angular lifecycle hook that is called when Angular sets or changes one or more bound input properties of a component or directive.

2. Does ngOnChanges() run only once?

No.

It can run multiple times whenever Angular detects changes to the relevant inputs.

3. Does ngOnChanges() run during initial component creation?

Yes.

When Angular initially sets bound input values, ngOnChanges() runs before ngOnInit().

4. What parameter does ngOnChanges() receive?

It receives:

SimpleChanges

Example:

ngOnChanges(changes: SimpleChanges)

5. How do you get the previous and current values?

const change = changes['name'];

console.log(change.previousValue);
console.log(change.currentValue);

6. How do you check whether it is the first change?

changes['name'].firstChange

or:

changes['name'].isFirstChange()

7. What is the difference between ngOnChanges() and ngOnInit()?

ngOnChanges() reacts to bound input changes and can execute multiple times.

ngOnInit() is used for component initialization and executes only once.

Easy way to remember

Parent changes @Input()
        ↓
Child receives new value
        ↓
ngOnChanges()
        ↓
SimpleChanges
        ↓
previousValue
currentValue
firstChange

Interview definition: ngOnChanges() is a lifecycle hook used to detect and respond to changes in a component's input properties.