[Solved] Given this Angular component code snippet:export class MyComponent implements OnInit, OnChanges { @Input() data:... } }What will be logged first when the component receives its first input value? | Angular

Angular - Lifecycle Hooks

Given this Angular component code snippet:

export class MyComponent implements OnInit, OnChanges {
  @Input() data: string;

  ngOnChanges() { console.log('Changes detected'); }
  ngOnInit() { console.log('Init called'); }
}

What will be logged first when the component receives its first input value?

AInit called

BChanges detected

CNo logs

DBoth logs at the same time

Step-by-Step Solution

Solution:

Step 1: Understand lifecycle order on first input
When the component first receives input, Angular calls ngOnChanges before ngOnInit.
Step 2: Identify which log appears first
The ngOnChanges method logs 'Changes detected' first, then ngOnInit logs 'Init called'.
Final Answer:
Changes detected -> Option B
Quick Check:
ngOnChanges runs before ngOnInit [OK]

Quick Trick: ngOnChanges logs before ngOnInit on first input [OK]

Common Mistakes:

Assuming ngOnInit runs before ngOnChanges
Thinking logs happen simultaneously
Ignoring ngOnChanges on first input

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 code snippet:

Step 1: Understand lifecycle order on first input

Step 2: Identify which log appears first

Final Answer:

Quick Check:

Want More Practice?