Bird
0
0

Consider an Angular component with these lifecycle hooks:

hard📝 lifecycle Q15 of 15
Angular - Lifecycle Hooks
Consider an Angular component with these lifecycle hooks:
ngOnChanges() { console.log('Changes'); }
ngOnInit() { console.log('Init'); }
ngAfterViewInit() { console.log('After View'); }
ngOnDestroy() { console.log('Destroy'); }

If the component receives new input twice, then is removed from the page, what is the correct order of console logs?
A"Changes", "Init", "Changes", "After View", "Destroy"
B"Init", "Changes", "After View", "Changes", "Destroy"
C"Changes", "Changes", "Init", "After View", "Destroy"
D"Changes", "Init", "After View", "Changes", "Destroy"
Step-by-Step Solution
Solution:
  1. Step 1: Order on first input and init

    First input triggers ngOnChanges, then ngOnInit runs once, then ngAfterViewInit after view setup.
  2. Step 2: Order on second input and destroy

    Second input triggers ngOnChanges again. Finally, when component is removed, ngOnDestroy runs.
  3. Final Answer:

    "Changes", "Init", "After View", "Changes", "Destroy" -> Option D
  4. Quick Check:

    ngOnChanges before ngOnInit; ngAfterViewInit after init; ngOnDestroy last [OK]
Quick Trick: Remember: ngOnChanges runs on every input change, ngOnInit once [OK]
Common Mistakes:
  • Placing ngOnInit before first ngOnChanges
  • Mixing order of ngAfterViewInit and ngOnChanges
  • Forgetting ngOnDestroy runs last

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes