Subscribing to observables in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to subscribe to the observable and log the data.

Angular

this.dataService.getData().[1](data => console.log(data));

Drag options to blanks, or click blank then click option'

Amap

Bsubscribe

Cfilter

Dpipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'map' instead of 'subscribe' which only transforms data but does not listen.

Using 'pipe' without subscribing does not trigger the observable.

The subscribe method is used to listen to the observable and receive data.

2fill in blank

medium

Complete the code to handle errors when subscribing to the observable.

Angular

this.apiService.fetchItems().subscribe({ next: items => this.items = items, error: [1] });

Drag options to blanks, or click blank then click option'

Aconsole.log()

B() => alert('Done')

Citems => this.items = items

Derr => console.error(err)

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a non-function value to error handler.

Confusing error handler with next handler.

The error property expects a function to handle errors. Here, it logs the error.

3fill in blank

hard

Fix the error in the subscription to properly unsubscribe on component destroy.

Angular

subscription = this.service.getUpdates().[1](data => this.update(data));

ngOnDestroy() {
  this.subscription.unsubscribe();
}

Drag options to blanks, or click blank then click option'

Apipe

Bmap

Csubscribe

Dfilter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pipe' which returns an observable, not a subscription.

Trying to unsubscribe something that is not a subscription.

Only subscribe returns a subscription object that can be unsubscribed.

4fill in blank

hard

Fill both blanks to subscribe to an observable and handle completion.

Angular

this.observable.[1]({ next: val => console.log(val), [2]: () => console.log('Complete') });

Drag options to blanks, or click blank then click option'

Asubscribe

Bcomplete

Cerror

Dpipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pipe' instead of 'subscribe'.

Confusing 'error' and 'complete' handlers.

The subscribe method accepts an object with next, error, and complete handlers.

5fill in blank

hard

Fill all three blanks to subscribe with next, error, and complete handlers.

Angular

this.dataStream.[1]({ [2]: data => this.process(data), [3]: err => this.handleError(err), complete: () => this.finish() });

Drag options to blanks, or click blank then click option'

Asubscribe

Bnext

Cerror

Dpipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'pipe' instead of 'subscribe'.

Mixing up 'next' and 'error' keys.

Use subscribe with an object containing next, error, and complete callbacks.