Why observables matter in Angular - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use observables for HTTP requests in Angular?

Angular uses observables for HTTP requests instead of promises. Why is this approach beneficial?

A Observables run HTTP requests synchronously, promises run them asynchronously.

B Observables automatically retry failed HTTP requests without extra code, promises do not.

C Observables allow multiple values over time and can be cancelled, unlike promises which resolve once.

D Observables convert HTTP responses to JSON automatically, promises require manual parsing.

💡 Hint

Think about how data streams and cancellation work in Angular.

Observables can emit multiple values over time and support cancellation, which helps manage ongoing HTTP requests efficiently. Promises only resolve once and cannot be cancelled.

❓ component_behavior

intermediate

What happens when subscribing to an observable in Angular?

Consider an Angular component subscribing to an observable from a service. What is the main behavior when the observable emits new data?

A The observable caches the data and replays it only when the component is destroyed.

B The component blocks UI rendering until the observable completes.

C The component automatically unsubscribes after the first data emission to prevent memory leaks.

D The component's subscription callback runs each time new data is emitted, updating the view accordingly.

💡 Hint

Think about how Angular updates the UI reactively.

When an observable emits new data, the subscription callback runs, allowing the component to update its state and the UI reactively. Angular does not unsubscribe automatically unless coded.

📝 Syntax

advanced

Identify the correct observable pipe usage in Angular

Which option correctly uses the pipe method with map and filter operators on an observable?

Angular

import { map, filter } from 'rxjs/operators';

const source$ = someObservable.pipe( /* ??? */ );

A filter(x => x > 10), map(x => x * 2)

B map(x => x * 2), filter(x => x > 10)

C map(x => x * 2 && filter(x => x > 10))

D filter(x => x > 10 || map(x => x * 2))

💡 Hint

Remember the order of operators matters in a pipe.

The pipe method takes operators as separate arguments in order. First filtering then mapping is correct to only map filtered values.

🔧 Debug

advanced

Why does this Angular observable subscription cause a memory leak?

Look at this Angular component code snippet:

ngOnInit() {
  this.dataService.getData().subscribe(data => {
    this.items = data;
  });
}

Why might this cause a memory leak?

Angular

ngOnInit() {
  this.dataService.getData().subscribe(data => {
    this.items = data;
  });
}

A The subscription is never unsubscribed, so it stays active even after the component is destroyed.

B The observable is synchronous, causing the UI to freeze.

C The dataService.getData() method returns a promise, not an observable.

D The items variable is not declared, causing a runtime error.

💡 Hint

Think about Angular component lifecycle and subscriptions.

Subscriptions must be unsubscribed when the component is destroyed to avoid memory leaks. This code does not unsubscribe.

❓ state_output

expert

What is the final value of count after this Angular observable sequence?

Given this Angular component code:

count = 0;

ngOnInit() {
  const source$ = of(1, 2, 3).pipe(
    tap(x => this.count += x),
    filter(x => x % 2 === 1),
    map(x => x * 10)
  );

  source$.subscribe();
}

What is the value of count after ngOnInit runs?

Angular

import { of } from 'rxjs';
import { tap, filter, map } from 'rxjs/operators';

count = 0;

ngOnInit() {
  const source$ = of(1, 2, 3).pipe(
    tap(x => this.count += x),
    filter(x => x % 2 === 1),
    map(x => x * 10)
  );

  source$.subscribe();
}

A 30

B 6

C 4

D 0

💡 Hint

Remember tap runs before filter and map.

The tap operator runs for every emitted value, adding 1 + 2 + 3 = 6 to count. Filter and map do not affect count.

Practice

1. Why are observables important in Angular applications?

easy

A. They help handle asynchronous data streams smoothly.

B. They replace all HTML elements with custom tags.

C. They make Angular apps run faster by compiling code.

D. They automatically style components without CSS.

Solution

1. Step 1: Understand what observables do

   Observables allow Angular to listen and react to data that changes over time, like user input or server responses.

2. Step 2: Compare options to observable purpose

   Only "They help handle asynchronous data streams smoothly." correctly describes observables as tools for handling asynchronous data streams smoothly.

3. Final Answer:

   They help handle asynchronous data streams smoothly. -> Option A

4. Quick Check:

   Observables = handle async data [OK]

Hint: Observables manage changing data over time [OK]

Common Mistakes:

• Thinking observables style components
• Confusing observables with HTML tags
• Believing observables speed up compilation

2. Which of the following is the correct way to subscribe to an observable in Angular?

easy

A. observable.watch(data => console.log(data));

B. observable.listen(data => console.log(data));

C. observable.on(data => console.log(data));

D. observable.subscribe(data => console.log(data));

Solution

1. Step 1: Recall Angular observable syntax

   In Angular, the method to receive data from an observable is called subscribe.

2. Step 2: Check each option's method name

   Only observable.subscribe(data => console.log(data)); uses the correct method subscribe. Others like listen, on, and watch are not valid observable methods.

3. Final Answer:

   observable.subscribe(data => console.log(data)); -> Option D

4. Quick Check:

   Subscribe method = correct syntax [OK]

Hint: Use subscribe() to get observable data [OK]

Common Mistakes:

• Using listen() instead of subscribe()
• Confusing event handlers with observables
• Trying to watch() or on() which don't exist

3. Given this Angular code snippet:

const obs = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.complete();
  subscriber.next(3);
});
obs.subscribe(value => console.log(value));

What will be printed in the console?

medium

A. 1 2 3

B. 3

C. 1 2

D. No output

Solution

1. Step 1: Understand observable emissions

   The observable emits 1, then 2, then calls complete(). After completion, emissions stop, so 3 is ignored.

2. Step 2: Determine console output

   The subscriber logs values 1 and 2 only. Value 3 is not emitted because the observable is completed before it.

3. Final Answer:

   1 2 -> Option C

4. Quick Check:

   Complete stops emissions = 1 2 [OK]

Hint: complete() stops further emissions [OK]

Common Mistakes:

• Expecting value after complete()
• Thinking all next() calls run regardless
• Ignoring complete() effect

4. What is wrong with this Angular observable subscription code?

this.data$ = this.http.get('/api/data');
this.data$.subscribe(data => {
  this.data = data;
});
this.data$.subscribe(data => {
  console.log(data);
});

medium

A. The subscribe method is misspelled.

B. Multiple subscriptions can cause repeated HTTP calls.

C. Observables cannot be assigned to variables.

D. The HTTP get method does not return an observable.

Solution

1. Step 1: Analyze multiple subscriptions to the same observable

   Each subscription to an HTTP observable triggers a new HTTP request, causing repeated calls.

2. Step 2: Identify the problem in the code

   Here, this.data$ is subscribed twice, so two HTTP requests are sent, which is inefficient and often unwanted.

3. Final Answer:

   Multiple subscriptions can cause repeated HTTP calls. -> Option B

4. Quick Check:

   Multiple subscriptions = repeated HTTP calls [OK]

Hint: Avoid multiple subscriptions to HTTP observables [OK]

Common Mistakes:

• Thinking subscribe is misspelled
• Believing observables can't be variables
• Assuming HTTP get returns non-observable

5. You want to create a component that updates its display every second with the current time using observables. Which approach correctly uses observables to achieve this in Angular?

hard

A. Use interval(1000).subscribe(time => this.currentTime = new Date()) inside ngOnInit and unsubscribe on destroy.

B. Use setTimeout inside the template to update time every second.

C. Call new Date() once in the constructor and display it.

D. Use a loop inside the template to refresh the time continuously.

Solution

1. Step 1: Identify observable usage for timed updates

   The interval observable emits values at set intervals, perfect for updating time every second.

2. Step 2: Proper subscription and cleanup

   Subscribing in ngOnInit and unsubscribing on destroy prevents memory leaks and keeps updates smooth.

3. Final Answer:

   Use interval(1000).subscribe(time => this.currentTime = new Date()) inside ngOnInit and unsubscribe on destroy. -> Option A

4. Quick Check:

   interval + subscribe + cleanup = correct pattern [OK]

Hint: Use interval observable with subscribe and unsubscribe [OK]

Common Mistakes:

• Using setTimeout in template (not reactive)
• Setting time once in constructor (no updates)
• Trying to loop in template (not reactive)