ngOnDestroy for cleanup in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the ngOnDestroy lifecycle hook in Angular?

The ngOnDestroy hook is used to perform cleanup just before Angular destroys a component or directive. It helps free resources like subscriptions or timers to prevent memory leaks.

beginner

When exactly is ngOnDestroy called in an Angular component?

ngOnDestroy is called right before Angular removes the component or directive from the DOM, such as when navigating away or conditionally hiding the component.

intermediate

Why should you unsubscribe from Observables inside ngOnDestroy?

Unsubscribing inside ngOnDestroy stops ongoing Observable streams to avoid memory leaks and unexpected behavior after the component is gone.

intermediate

Show a simple example of using ngOnDestroy to clear a timer.

Inside ngOnDestroy, call clearInterval or clearTimeout to stop timers started in the component, preventing them from running after destruction.

beginner

What happens if you forget to implement cleanup in ngOnDestroy?

If cleanup is missed, resources like subscriptions or timers keep running, causing memory leaks and bugs because the component is no longer active but still consuming resources.

What is the main use of ngOnDestroy in Angular?

A To handle user input events

B To initialize component data

C To render the component template

D To clean up resources before component destruction

ngOnDestroy is specifically for cleanup tasks before Angular destroys the component.

When should you unsubscribe from Observables in Angular?

A Inside <code>ngOnDestroy</code>

B Inside <code>ngOnInit</code>

C Inside the constructor

D Never unsubscribe

Unsubscribing in ngOnDestroy ensures no memory leaks after the component is destroyed.

Which Angular lifecycle hook is called just before a component is removed from the DOM?

A ngOnDestroy

B ngAfterViewInit

C ngOnChanges

D ngDoCheck

ngOnDestroy runs right before the component is removed.

What could happen if you forget to clear timers in ngOnDestroy?

A Timers stop automatically

B Timers keep running causing unexpected behavior

C Angular throws an error

D Nothing happens

Timers continue running and may cause bugs or memory leaks.

Which of these is NOT a reason to use ngOnDestroy?

A To unsubscribe from Observables

B To clear intervals or timeouts

C To fetch data from a server

D To release resources

ngOnDestroy is for cleanup, not for fetching data.

Explain why and how you use ngOnDestroy in an Angular component.

Think about what happens when a component is removed and what resources might still be running.

Describe a real-life example where forgetting to implement ngOnDestroy cleanup could cause problems.

Imagine a component that keeps listening to data even after you leave its page.