ngOnChanges for input changes in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when an @Input property changes in Angular?

Consider a child component with an @Input property. When the parent changes the input value, what does ngOnChanges receive?

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>{{data}}</p>`
})
export class ChildComponent implements OnChanges {
  @Input() data!: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }
}

A An object with keys for each changed input, each containing previousValue and currentValue.

B A string with the new input value only.

C An array of all input property names.

D No argument is passed to ngOnChanges.

💡 Hint

Think about how Angular tracks changes to inputs and what information it provides.

The ngOnChanges method receives a SimpleChanges object. This object has keys for each input property that changed. Each key holds an object with previousValue, currentValue, and firstChange properties.

❓ state_output

intermediate

What is logged when the input changes twice?

Given this Angular component, what will be logged to the console after the parent changes the input from 'one' to 'two' and then to 'three'?

Angular

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

@Component({
  selector: 'app-child',
  template: `<p>{{value}}</p>`
})
export class ChildComponent implements OnChanges {
  @Input() value!: string;

  ngOnChanges(changes: SimpleChanges) {
    console.log(`Changed from ${changes['value'].previousValue} to ${changes['value'].currentValue}`);
  }
}

A

Changed from undefined to one
Changed from one to two

B

Changed from one to two
Changed from two to three

C

Changed from undefined to one
Changed from undefined to two
Changed from undefined to three

D

Changed from undefined to one
Changed from one to two
Changed from two to three

💡 Hint

Remember the first change has previousValue as undefined.

On the first input change (initial binding), previousValue is undefined. Subsequent changes show the last value as previousValue. The prompt describes subsequent changes starting from 'one', so the logs are 'Changed from one to two' followed by 'Changed from two to three'.

📝 Syntax

advanced

Which code snippet correctly implements ngOnChanges to detect input changes?

Choose the Angular component code that correctly implements ngOnChanges to detect changes on an input property count.

A

ngOnChanges(changes: SimpleChanges) {
  console.log(changes.currentValue);
}

B

ngOnChanges() {
  console.log('Count changed:', this.count);
}

C

ngOnChanges(changes: SimpleChanges) {
  if (changes.count) {
    console.log('Count changed:', changes.count.currentValue);
  }
}

D

ngOnChanges(changes: any) {
  console.log(changes.count.previousValue);
}

💡 Hint

Check how SimpleChanges is used to access changed inputs.

Option C correctly checks if the count property changed and accesses its currentValue. Option C lacks the changes parameter and cannot detect previous values. Option C uses any but does not check if count exists. Option C tries to access changes.currentValue which is invalid.

🔧 Debug

advanced

Why does ngOnChanges not fire when an input object's property changes?

Given this parent and child component, why does ngOnChanges in the child not trigger when a property inside the input object changes?

Parent template:
<app-child [config]="config"></app-child>

Parent component:
config = { theme: 'dark' };

// Later update
this.config.theme = 'light';

A Because the input property was not marked with @Input decorator.

B Because ngOnChanges only works with primitive inputs, not objects.

C Because the child component must implement ngDoCheck instead of ngOnChanges.

D Because Angular compares input references, not deep object properties, so the reference did not change.

💡 Hint

Think about how Angular detects changes for objects passed as inputs.

Angular's change detection for inputs uses reference checks. If the object reference does not change, ngOnChanges does not fire, even if internal properties change. To detect such changes, you must replace the object with a new reference or use other lifecycle hooks.

🧠 Conceptual

expert

What is the correct sequence of Angular lifecycle hooks when an input changes?

Order the lifecycle hooks in the sequence Angular calls them when an input property changes on a component.

A 2, 1, 3, 4

B 1, 2, 3, 4

C 3, 2, 1, 4

D 2, 3, 1, 4

💡 Hint

Remember which hooks run before and after initialization and which run on every change detection cycle.

When an input changes, Angular calls ngOnChanges first, then ngOnInit (only once after first change), then ngDoCheck on every change detection, and finally ngAfterViewInit after the component's view is initialized.

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