[Solved] Given this Angular component snippet:export class MyComponent implements OnChanges { @Input() count = 0;... } } }What will be the content of changesLog after the input count changes from 5 to 10? | Angular

Angular - Lifecycle Hooks

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?

A["Count changed from 0 to 10"]

B["Count changed from 5 to 10"]

C[] (empty array)

D["Count changed from undefined to 10"]

Step-by-Step Solution

Solution:

Step 1: Understand SimpleChanges values
The changes['count'] object has previousValue and currentValue reflecting old and new input values.
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.
Final Answer:
["Count changed from 5 to 10"] -> Option B
Quick Check:
previousValue=5, currentValue=10 [OK]

Quick Trick: 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

Master "Lifecycle Hooks" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this Angular component snippet:

Step 1: Understand SimpleChanges values

Step 2: Apply given input change

Final Answer:

Quick Check:

Want More Practice?