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.