[Solved] Consider this Angular component code snippet:export class TimerComponent implements OnDestroy { intervalId = setInterval(() =>... } }What will happen when this component is removed from the view? | Angular

Angular - Lifecycle Hooks

Consider this Angular component code snippet:

export class TimerComponent implements OnDestroy {
  intervalId = setInterval(() => console.log('tick'), 1000);

  ngOnDestroy() {
    clearInterval(this.intervalId);
    console.log('Timer stopped');
  }
}

What will happen when this component is removed from the view?

AThe interval stops and logs 'Timer stopped' once

BAn error occurs because clearInterval is not valid here

CNothing happens because ngOnDestroy is not called automatically

DThe interval keeps running and logs 'tick' every second

Step-by-Step Solution

Solution:

Step 1: Understand what ngOnDestroy does here
When the component is removed, Angular calls ngOnDestroy, which clears the interval timer.
Step 2: Effect of clearing the interval
Clearing the interval stops the repeated 'tick' logs, and the message 'Timer stopped' is logged once.
Final Answer:
The interval stops and logs 'Timer stopped' once -> Option A
Quick Check:
ngOnDestroy clears timer = The interval stops and logs 'Timer stopped' once [OK]

Quick Trick: ngOnDestroy stops timers to prevent leaks [OK]

Common Mistakes:

Thinking interval keeps running after destroy
Assuming ngOnDestroy is not called
Confusing clearInterval usage

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

Consider this Angular component code snippet:

Step 1: Understand what ngOnDestroy does here

Step 2: Effect of clearing the interval

Final Answer:

Quick Check:

Want More Practice?