Subscribing to observables in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the console output after subscribing?

Consider this Angular component code snippet that subscribes to an observable emitting numbers 1 to 3. What will be printed in the console?

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-number',
  template: `<p>Check console output</p>`
})
export class NumberComponent {
  constructor() {
    const numbers$ = of(1, 2, 3);
    numbers$.subscribe(value => console.log(value));
  }
}

A [1, 2, 3]

B undefined

C Error: Observable not subscribed

D 1\n2\n3

💡 Hint

Remember that subscribing to an observable triggers its emissions one by one.

The 'of' operator emits each value in sequence. The subscribe callback logs each value separately, so console shows 1, then 2, then 3 on separate lines.

❓ lifecycle

intermediate

When should you unsubscribe from an observable in Angular?

In Angular components, when is the best time to unsubscribe from an observable to avoid memory leaks?

A In the ngOnDestroy lifecycle hook

B Immediately after subscribing

C In the constructor

D Never unsubscribe; Angular handles it automatically

💡 Hint

Think about when the component is removed from the page.

Unsubscribing in ngOnDestroy ensures the subscription is cleaned up when the component is destroyed, preventing memory leaks.

📝 Syntax

advanced

Identify the error in this subscription code

What error will this Angular code produce when subscribing to an observable?

Angular

import { Component } from '@angular/core';
import { interval } from 'rxjs';

@Component({
  selector: 'app-timer',
  template: `<p>Timer running</p>`
})
export class TimerComponent {
  ngOnInit() {
    const timer$ = interval(1000);
    timer$.subscribe();
  }
}

A Runtime error: Observable not started

B TypeError: subscribe callback missing

C No error, but subscription does nothing

D SyntaxError: missing callback function

💡 Hint

Is a callback function required for subscribe?

Calling subscribe without arguments is allowed but no action happens on emissions. No error is thrown.

🔧 Debug

advanced

Why does this subscription not log values?

This Angular code subscribes to an observable but nothing is logged. What is the cause?

Angular

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-test',
  template: `<p>Test</p>`
})
export class TestComponent {
  constructor() {
    const data$ = of(10, 20, 30);
    data$.subscribe();
  }
}

A No callback function passed to subscribe, so no logs

B Observable emits no values

C Subscription is not started without next callback

D Console.log is missing in the code

💡 Hint

Check what subscribe needs to do something with emitted values.

Without a callback function, subscribe does not process emitted values, so nothing is logged.

🧠 Conceptual

expert

What happens if you subscribe multiple times to a cold observable?

In Angular, if you subscribe multiple times to a cold observable like 'of(1,2,3)', what is the behavior?

A Subscriptions share the same execution and emit simultaneously

B Each subscription triggers the observable sequence independently

C Only the first subscription triggers emissions; others get cached values

D Subscribing multiple times causes an error

💡 Hint

Think about how cold observables behave on each subscription.

Cold observables start a new execution for each subscription, so each subscriber receives the full sequence independently.

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