Subscribing to observables 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 you watch for data changes and react when new data arrives, like listening to a radio station.

beginner

How do you subscribe to an observable in Angular?

You use the subscribe() method on the observable. This tells Angular to start listening and run your code when data comes in.

intermediate

Why should you unsubscribe from observables?

To avoid memory leaks. If you don’t stop listening when the component is gone, your app keeps using memory and can slow down or crash.

intermediate

What is a common way to unsubscribe automatically in Angular?

Use the takeUntil() operator with a Subject that emits when the component is destroyed, or use Angular's async pipe in templates.

intermediate

What are the three callback functions you can pass to subscribe()?

1. Next: runs when new data arrives.
2. Error: runs if something goes wrong.
3. Complete: runs when the observable finishes sending data.

What does the subscribe() method do in Angular?

A Stops listening to an observable

B Starts listening to an observable to receive data

C Creates a new observable

D Converts observable to promise

subscribe() tells Angular to listen to the observable and run your code when data arrives.

Which operator helps automatically unsubscribe when a component is destroyed?

A takeUntil()

B filter()

C map()

D mergeMap()

takeUntil() listens until a signal (like component destruction) to stop the subscription.

What happens if you forget to unsubscribe from an observable?

A Nothing, it’s safe to leave subscriptions open

B The observable stops automatically

C Your app may leak memory and slow down

D Angular throws an error

Open subscriptions keep using memory, which can slow or crash your app.

Which of these is NOT a callback you can pass to subscribe()?

A cancel

B error

C complete

D next

cancel is not a callback for subscribe(). The three are next, error, and complete.

What is the easiest way to handle subscriptions in Angular templates?

A Use <code>subscribe()</code> in the template

B Use <code>unsubscribe()</code> in the template

C Use <code>setTimeout()</code>

D Use the <code>async</code> pipe

The async pipe automatically subscribes and unsubscribes for you in templates.

Explain how subscribing to an observable works in Angular and why it is important to unsubscribe.

Think about listening to a radio and turning it off when done.

Describe two ways to manage subscriptions safely in Angular components.

One way uses code in the component, the other uses the template.

Practice

1. What does subscribing to an observable in Angular allow you to do?

easy

A. React to data or events over time

B. Create new components automatically

C. Change the Angular version

D. Compile TypeScript to JavaScript

Solution

1. Step 1: Understand the purpose of observables

   Observables emit data or events over time, like a stream of values.

2. Step 2: Role of subscribing

   Subscribing lets you listen and react to these emitted values as they arrive.

3. Final Answer:

   React to data or events over time -> Option A

4. Quick Check:

   Subscribing = Reacting to data/events [OK]

Hint: Subscribing means listening to data changes over time [OK]

Common Mistakes:

• Thinking subscribing creates components
• Confusing subscribing with compilation
• Believing subscribing changes Angular version

2. Which is the correct syntax to subscribe to an observable named data$ in Angular?

easy

A. data$.subscribe(value => console.log(value));

B. data$.subscribe = value => console.log(value);

C. subscribe(data$ => console.log(data$));

D. data$.subscribe(console.log());

Solution

1. Step 1: Identify correct subscribe method usage

   The subscribe method is called on the observable with a callback function.

2. Step 2: Check syntax correctness

   data$.subscribe(value => console.log(value)); correctly calls data$.subscribe with an arrow function receiving the emitted value.

3. Final Answer:

   data$.subscribe(value => console.log(value)); -> Option A

4. Quick Check:

   Correct subscribe syntax = data$.subscribe(value => console.log(value)); [OK]

Hint: Use observable.subscribe(callback) to listen [OK]

Common Mistakes:

• Assigning subscribe instead of calling it
• Calling subscribe as a standalone function
• Calling console.log() prematurely

3. Given this code snippet:

const obs$ = of(1, 2, 3);
obs$.subscribe({
  next: x => console.log(x),
  error: err => console.error(err),
  complete: () => console.log('Done')
});

What will be the console output?

medium

A. Done 1 2 3

B. 1 2 3 Done

C. 1 2 3

D. Error

Solution

1. Step 1: Understand observable emissions

   The observable emits values 1, 2, 3 in sequence.

2. Step 2: Analyze subscription callbacks

   The next callback logs each value, then complete logs 'Done'.

3. Final Answer:

   1 2 3 Done -> Option B

4. Quick Check:

   Values then complete message = 1 2 3 Done [OK]

Hint: next logs values, complete logs 'Done' after all [OK]

Common Mistakes:

• Assuming complete logs before values
• Ignoring complete callback
• Expecting error without error emission

4. What is wrong with this subscription code?

this.data$.subscribe(data => {
  this.value = data;
});
// No unsubscribe called anywhere

medium

A. It will unsubscribe automatically

B. It will throw a syntax error

C. It will cause a memory leak if component is destroyed

D. It will not receive any data

Solution

1. Step 1: Identify subscription management

   The code subscribes but never unsubscribes, risking resource leaks.

2. Step 2: Understand Angular component lifecycle

   Without unsubscribing, the subscription stays active after component destruction, causing memory leaks.

3. Final Answer:

   It will cause a memory leak if component is destroyed -> Option C

4. Quick Check:

   Missing unsubscribe = memory leak risk [OK]

Hint: Always unsubscribe to avoid memory leaks [OK]

Common Mistakes:

• Assuming Angular unsubscribes automatically
• Thinking no data will be received
• Confusing syntax errors with runtime issues

5. You want to subscribe to two observables obs1$ and obs2$ and combine their latest values whenever either emits. Which RxJS operator should you use before subscribing?

hard

A. filter

B. map

C. catchError

D. combineLatest

Solution

1. Step 1: Understand the need to combine latest values

   You want to react to the latest values from both observables whenever either emits.

2. Step 2: Identify the correct RxJS operator

   combineLatest emits an array of latest values from all observables whenever any emits.

3. Final Answer:

   combineLatest -> Option D

4. Quick Check:

   Combine latest values = combineLatest operator [OK]

Hint: Use combineLatest to merge latest values from multiple observables [OK]

Common Mistakes:

• Using map which transforms but doesn't combine
• Using filter which only filters emissions
• Using catchError which handles errors, not combining