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.

Practice

1. What is the main reason to subscribe to an Observable inside the ngOnInit lifecycle hook in an Angular component?

easy

A. To start listening to data streams when the component is initialized

B. To stop listening to data streams when the component is destroyed

C. To create a new Observable instance

D. To update the component's template directly

Solution

1. Step 1: Understand ngOnInit role

   ngOnInit runs once when the component is created, ideal to start tasks like subscribing to Observables.

2. Step 2: Purpose of subscribing in ngOnInit

   Subscribing here means the component begins listening to data streams as soon as it is ready.

3. Final Answer:

   To start listening to data streams when the component is initialized -> Option A

4. Quick Check:

   Subscribe in ngOnInit = start listening [OK]

Hint: Subscribe in ngOnInit to start data listening early [OK]

Common Mistakes:

• Subscribing in ngOnDestroy instead of ngOnInit
• Expecting subscription to stop automatically
• Confusing subscription with Observable creation

2. Which of the following is the correct way to unsubscribe from an Observable in the ngOnDestroy lifecycle hook?

easy

A. this.subscription.unsubscribe();

B. this.subscription.subscribe();

C. this.subscription.complete();

D. this.subscription.destroy();

Solution

1. Step 1: Identify the unsubscribe method

   Angular subscriptions have an unsubscribe() method to stop listening to Observables.

2. Step 2: Match method to lifecycle hook

   In ngOnDestroy, calling unsubscribe() properly cleans up the subscription.

3. Final Answer:

   this.subscription.unsubscribe(); -> Option A

4. Quick Check:

   Unsubscribe method = unsubscribe() [OK]

Hint: Use unsubscribe() to stop Observable listening [OK]

Common Mistakes:

• Using subscribe() instead of unsubscribe() to stop
• Calling complete() which does not unsubscribe
• Using a non-existent destroy() method

3. Consider this Angular component code snippet:

export class TimerComponent implements OnInit, OnDestroy {
  time = 0;
  private subscription!: Subscription;

  ngOnInit() {
    this.subscription = interval(1000).subscribe(() => {
      this.time++;
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

What will be the value of time after 3 seconds if the component is displayed and then removed?

medium

A. undefined

B. 3

C. 0

D. Subscription error

Solution

1. Step 1: Understand the interval Observable

   The interval(1000) emits a value every 1000 milliseconds (1 second), triggering the subscription callback.

2. Step 2: Count increments before unsubscribe

   After 3 seconds, the callback runs 3 times, incrementing time from 0 to 3. The unsubscribe in ngOnDestroy stops further increments.

3. Final Answer:

   3 -> Option B

4. Quick Check:

   3 seconds = 3 increments [OK]

Hint: Count interval ticks before unsubscribe stops updates [OK]

Common Mistakes:

• Assuming time stays 0 without increments
• Expecting error due to missing unsubscribe
• Confusing unsubscribe timing with immediate stop

4. Identify the error in this Angular component code:

export class DataComponent implements OnInit {
  data$ = this.service.getData();

  ngOnInit() {
    this.data$.subscribe(data => {
      console.log(data);
    });
  }
}

What is the main problem here?

medium

A. Observable should not be assigned to a property

B. Subscription syntax is incorrect

C. Missing unsubscribe in ngOnDestroy causes memory leak

D. ngOnInit should not contain subscriptions

Solution

1. Step 1: Check subscription management

   The code subscribes to an Observable but never unsubscribes, risking memory leaks.

2. Step 2: Lifecycle hook missing unsubscribe

   Without ngOnDestroy to unsubscribe, the subscription stays active even after component destruction.

3. Final Answer:

   Missing unsubscribe in ngOnDestroy causes memory leak -> Option C

4. Quick Check:

   Always unsubscribe to avoid leaks [OK]

Hint: Always unsubscribe in ngOnDestroy to prevent leaks [OK]

Common Mistakes:

• Thinking subscription syntax is wrong
• Believing Observables can't be class properties
• Assuming ngOnInit forbids subscriptions

5. You want to create an Angular component that listens to a user input Observable and updates a display value. The Observable may emit multiple times quickly. Which approach best manages the subscription lifecycle and avoids memory leaks?

hard

A. Use a global variable to store data and avoid subscribing

B. Subscribe in the constructor and never unsubscribe

C. Subscribe in ngOnInit without unsubscribing, relying on Angular to clean up

D. Subscribe in ngOnInit and unsubscribe in ngOnDestroy using a Subscription object

Solution

1. Step 1: Proper subscription management

   Subscribing in ngOnInit ensures the component starts listening after creation.

2. Step 2: Unsubscribe in ngOnDestroy to prevent leaks

   Unsubscribing cleans up resources when the component is removed, avoiding memory leaks.

3. Final Answer:

   Subscribe in ngOnInit and unsubscribe in ngOnDestroy using a Subscription object -> Option D

4. Quick Check:

   Subscribe ngOnInit + unsubscribe ngOnDestroy = safe lifecycle [OK]

Hint: Pair subscribe in ngOnInit with unsubscribe in ngOnDestroy [OK]

Common Mistakes:

• Subscribing in constructor which is too early
• Not unsubscribing and causing leaks
• Using global variables instead of Observables