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.