Observable in component lifecycle in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an Observable in Angular?

An Observable is a way to handle asynchronous data streams. It lets components listen to data changes over time, like waiting for user input or server responses.

beginner

Why should you unsubscribe from Observables in Angular components?

Unsubscribing prevents memory leaks by stopping the component from listening to data after it is destroyed. This keeps the app fast and stable.

beginner

Which Angular lifecycle hook is best for unsubscribing from Observables?

The ngOnDestroy() hook is used to clean up subscriptions when the component is about to be removed from the screen.

intermediate

How does the async pipe help with Observables in templates?

The async pipe automatically subscribes to an Observable and updates the view with new data. It also unsubscribes when the component is destroyed, so you don’t have to do it manually.

intermediate

What happens if you forget to unsubscribe from an Observable in Angular?

The Observable keeps running and holding resources, causing memory leaks and possibly slowing down or crashing the app over time.

Which lifecycle hook is used to clean up subscriptions in Angular components?

A ngDoCheck

B ngOnInit

C ngAfterViewInit

D ngOnDestroy

ngOnDestroy is called just before the component is removed, making it the right place to unsubscribe.

What does the async pipe do in Angular templates?

A Manually triggers change detection

B Automatically subscribes and unsubscribes from Observables

C Converts Observables to Promises

D Prevents Observables from emitting values

The async pipe handles subscription and unsubscription automatically, updating the view with new data.

Why is unsubscribing from Observables important?

A To avoid memory leaks and improve app performance

B To speed up the Observable emissions

C To convert Observables to synchronous calls

D To enable two-way data binding

Unsubscribing stops the Observable from running when no longer needed, preventing memory leaks.

Which of these is NOT a way to manage Observable subscriptions in Angular?

A Ignoring subscriptions and letting Angular handle it

B Manually unsubscribing in ngOnDestroy

C Using async pipe in templates

D Using takeUntil operator with a notifier

Angular does not automatically unsubscribe for you unless you use async pipe or operators; ignoring subscriptions can cause leaks.

What is a common pattern to unsubscribe from multiple Observables in ngOnDestroy?

A Using ngOnInit to unsubscribe

B Calling unsubscribe on each Observable separately

C Using a Subject as a notifier with takeUntil

D Using setTimeout to delay unsubscription

Using a Subject with takeUntil lets you unsubscribe from many Observables at once when the notifier emits.

Explain how Observables fit into the Angular component lifecycle and why managing subscriptions is important.

Think about what happens when a component is removed and how Observables keep running if not stopped.

Describe how the async pipe simplifies working with Observables in Angular templates.

Consider how Angular templates can react to data changes without extra code.