Bird
0
0

```typescript @Component({ selector: 'app-sample', template: '' }) export class SampleComponent implements OnInit, OnDestroy { ngOnInit() { console.log('Init'); } ngOnDestroy() { console.log('Destroy'); } } ``` When the component is created and then destroyed, what is the console output?

medium📝 lifecycle Q4 of 15
Angular - Lifecycle Hooks
Given this Angular component code snippet, what will be logged to the console? ```typescript @Component({ selector: 'app-sample', template: '' }) export class SampleComponent implements OnInit, OnDestroy { ngOnInit() { console.log('Init'); } ngOnDestroy() { console.log('Destroy'); } } ``` When the component is created and then destroyed, what is the console output?
AInit followed by Destroy
BDestroy followed by Init
COnly Init
DOnly Destroy
Step-by-Step Solution
Solution:
  1. Step 1: Understand lifecycle hook call order

    ngOnInit runs after component creation; ngOnDestroy runs before component removal.
  2. Step 2: Trace console logs

    On creation, 'Init' logs; on destruction, 'Destroy' logs, so output is 'Init' then 'Destroy'.
  3. Final Answer:

    Init followed by Destroy -> Option A
  4. Quick Check:

    Lifecycle hook order = Init then Destroy [OK]
Quick Trick: ngOnInit logs first, ngOnDestroy logs last [OK]
Common Mistakes:
  • Assuming ngOnDestroy runs before ngOnInit
  • Expecting both logs at the same time

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes