ngOnChanges for input changes in Angular - Step-by-Step Execution

Concept Flow - ngOnChanges for input changes

Parent changes input value

↓

Angular detects input change

↓

Calls ngOnChanges() in child

↓

ngOnChanges receives SimpleChanges object

↓

Child updates based on changes

↓

View updates with new input

When a parent changes an input property, Angular calls ngOnChanges in the child with details of the change, allowing the child to react before the view updates.

Execution Sample

Angular

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

@Component({ selector: 'child-comp', template: '{{data}}' })
export class ChildComponent implements OnChanges {
  @Input() data = '';
  ngOnChanges(changes: SimpleChanges) {
    console.log('Data changed:', changes['data'].currentValue);
  }
}

This child component logs changes to its input property 'data' whenever the parent updates it.

Execution Table

Step	Parent changes input	ngOnChanges called	SimpleChanges content	Child action	View update
1	data = 'Hello'	Yes	{ data: { previousValue: undefined, currentValue: 'Hello', firstChange: true } }	Logs: Data changed: Hello	View shows 'Hello'
2	data = 'World'	Yes	{ data: { previousValue: 'Hello', currentValue: 'World', firstChange: false } }	Logs: Data changed: World	View shows 'World'
3	data = 'World'	No	No change detected	No log	View remains 'World'
4	data = 'Angular'	Yes	{ data: { previousValue: 'World', currentValue: 'Angular', firstChange: false } }	Logs: Data changed: Angular	View shows 'Angular'

💡 No further input changes, ngOnChanges not called.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4
data	'' (empty)	'Hello'	'World'	'World'	'Angular'

Key Moments - 3 Insights

Why is ngOnChanges not called when the input value stays the same?

Because Angular only calls ngOnChanges when it detects a change in the input value. Step 3 in the execution_table shows no call since 'data' remains 'World'.

What does the SimpleChanges object contain?

It contains previousValue, currentValue, and firstChange for each changed input. See steps 1, 2, and 4 in the execution_table for examples.

Can ngOnChanges detect multiple input changes at once?

Yes, ngOnChanges receives all changed inputs in the SimpleChanges object. This example shows one input, but Angular supports multiple inputs.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'data' after step 2?

A 'Hello'

B 'World'

C 'Angular'

D '' (empty string)

💡 Hint

Check the 'data' variable in variable_tracker after 'After 2'

At which step does ngOnChanges NOT get called?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look at the 'ngOnChanges called' column in execution_table

If the parent changes 'data' to the same value twice in a row, what happens?

A ngOnChanges is not called the second time

B ngOnChanges is called once

C ngOnChanges is called twice

D The view does not update at all

💡 Hint

Refer to step 3 in execution_table where input stays the same

Concept Snapshot

ngOnChanges is a lifecycle hook called when Angular detects input property changes.
It receives a SimpleChanges object with previous and current values.
Use it to react to input changes before the view updates.
Called only when input values actually change.
Useful for initialization or side effects on input update.

Full Transcript

This visual execution shows how Angular calls ngOnChanges in a child component when its input property changes. When the parent updates the input, Angular detects the change and calls ngOnChanges with a SimpleChanges object describing the old and new values. The child can then react, such as logging the new value or updating internal state. If the input value does not change, ngOnChanges is not called. This helps components respond only to real changes. The view updates after ngOnChanges runs, showing the latest input value.

Practice

1. What is the primary purpose of the ngOnChanges lifecycle hook in Angular?

easy

A. To handle user events like clicks

B. To initialize component variables after creation

C. To respond whenever an input property changes value

D. To destroy the component before removal

Solution

1. Step 1: Understand the role of ngOnChanges

   The ngOnChanges hook is called when Angular detects changes to input properties of a component.

2. Step 2: Compare with other lifecycle hooks

   Other hooks like ngOnInit initialize data, but ngOnChanges specifically reacts to input changes.

3. Final Answer:

   To respond whenever an input property changes value -> Option C

4. Quick Check:

   ngOnChanges = input change response [OK]

Hint: ngOnChanges runs when inputs change, not on init [OK]

Common Mistakes:

• Confusing ngOnChanges with ngOnInit
• Thinking it handles user events
• Assuming it runs on component destruction

2. Which of the following is the correct method signature for ngOnChanges in an Angular component?

easy

A. ngOnChanges(changes: SimpleChanges): void

B. ngOnChanges(): void

C. ngOnChanges(changes: ChangeDetectorRef): void

D. ngOnChanges(event: Event): void

Solution

1. Step 1: Recall the ngOnChanges signature

   The ngOnChanges method receives a parameter of type SimpleChanges which holds the changes.

2. Step 2: Verify parameter type and return

   The method returns void and the parameter must be SimpleChanges, not other types.

3. Final Answer:

   ngOnChanges(changes: SimpleChanges): void -> Option A

4. Quick Check:

   ngOnChanges(SimpleChanges) = correct signature [OK]

Hint: ngOnChanges always takes SimpleChanges parameter [OK]

Common Mistakes:

• Omitting the parameter
• Using wrong parameter types
• Adding event or unrelated parameters

3. Given this Angular component snippet:

export class MyComponent implements OnChanges {
  @Input() count = 0;
  changesLog: string[] = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['count']) {
      this.changesLog.push(`Count changed from ${changes['count'].previousValue} to ${changes['count'].currentValue}`);
    }
  }
}

What will be the content of changesLog after the input count changes from 5 to 10?

medium

A. ["Count changed from 0 to 10"]

B. ["Count changed from 5 to 10"]

C. [] (empty array)

D. ["Count changed from undefined to 10"]

Solution

1. Step 1: Understand SimpleChanges values

   The changes['count'] object has previousValue and currentValue reflecting old and new input values.

2. Step 2: Apply given input change

   When count changes from 5 to 10, previousValue is 5 and currentValue is 10, so the string is pushed accordingly.

3. Final Answer:

   ["Count changed from 5 to 10"] -> Option B

4. Quick Check:

   previousValue=5, currentValue=10 [OK]

Hint: previousValue and currentValue show old and new input [OK]

Common Mistakes:

• Assuming previousValue is always 0
• Expecting empty changesLog on input change
• Confusing previousValue with undefined

4. Identify the error in this Angular component code using ngOnChanges:

export class TestComponent implements OnChanges {
  @Input() data: string;

  ngOnChanges() {
    console.log(this.data);
  }
}

medium

A. ngOnChanges must have a parameter of type SimpleChanges

B. The @Input decorator is missing parentheses

C. ngOnChanges should return a value

D. data property must be initialized

Solution

1. Step 1: Check ngOnChanges method signature

   The ngOnChanges method must accept a parameter of type SimpleChanges to receive input changes.

2. Step 2: Verify other parts

   The @Input decorator syntax is correct, no return value is needed, and data can be uninitialized initially.

3. Final Answer:

   ngOnChanges must have a parameter of type SimpleChanges -> Option A

4. Quick Check:

   ngOnChanges(SimpleChanges) required [OK]

Hint: Always include SimpleChanges parameter in ngOnChanges [OK]

Common Mistakes:

• Omitting the SimpleChanges parameter
• Expecting ngOnChanges to return a value
• Misusing @Input decorator syntax

5. You want to reset a component's internal counter to zero whenever the input resetFlag changes from false to true. Which ngOnChanges implementation correctly achieves this?

export class CounterComponent implements OnChanges {
  @Input() resetFlag = false;
  @Input() otherValue: number = 0;
  counter = 10;

  ngOnChanges(changes: SimpleChanges) {
    // Which option resets counter correctly?
  }
}

hard

A. if (this.resetFlag) { this.counter = 0; }

B. if (changes['resetFlag'] && changes['resetFlag'].previousValue === true) { this.counter = 0; }

C. if (changes['resetFlag'].previousValue === false) { this.counter = 0; }

D. if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; }

Solution

1. Step 1: Detect resetFlag input change to true

   We must check if resetFlag changed and its new value is true.

2. Step 2: Verify condition logic

   if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; } checks both existence of change and currentValue === true, correctly resetting counter.

3. Step 3: Analyze other options

   if (this.resetFlag) { this.counter = 0; } checks current value but runs on any input change, incorrectly resetting if resetFlag is true when other inputs change. if (changes['resetFlag'].previousValue === false) { this.counter = 0; } accesses changes['resetFlag'] without checking existence, causing runtime error when other inputs change. if (changes['resetFlag'] && changes['resetFlag'].previousValue === true) { this.counter = 0; } checks previous true, wrong condition.

4. Final Answer:

   if (changes['resetFlag'] && changes['resetFlag'].currentValue === true) { this.counter = 0; } -> Option D

5. Quick Check:

   Check currentValue true on input change [OK]

Hint: Check currentValue === true in changes to reset [OK]

Common Mistakes:

• Ignoring previousValue and currentValue difference
• Resetting counter on wrong condition
• Not checking if changes object has resetFlag