Angular Observable Example - Javascript

Introduction

In Angular, an observable is a powerful tool for managing asynchronous data streams. It is a way to handle data that arrives over time, such as results from an API call or user input. Observables provide a way to reactively update a component's state based on changes in data.

This guide will cover the basics of using observables in Angular, including how to create and subscribe to an observable, how to handle errors, and how to use operators to transform observable data.

Creating an Observable

To create an observable in Angular, we use the Observable constructor from the rxjs library. Here is an example of creating an observable that emits the numbers 1 to 5:

import { Observable } from 'rxjs';

const observable = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);
  observer.next(5);
  observer.complete();
});

In this example, we create an observable by passing a function to the Observable constructor. This function takes an observer object that we can use to emit values to the observable stream.

The next() method is used to emit a value to the stream, while the complete() method indicates that the observable has finished emitting values.

Subscribing to an Observable

Once we have created an observable, we can subscribe to it to receive its values. In Angular, we typically subscribe to an observable in a component's ngOnInit() lifecycle hook.

Here is an example of subscribing to the observable we created earlier:

observable.subscribe({
  next: (value) => console.log(value),
  error: (error) => console.error(error),
  complete: () => console.log('Observable complete'),
});

In this example, we use the subscribe() method to subscribe to the observable. This method takes an object with three optional properties:

• next: A function that is called when a new value is emitted from the observable.
• error: A function that is called when an error occurs in the observable.
• complete: A function that is called when the observable has finished emitting values.

In our example, we simply log the emitted values to the console.

Handling Errors

If an error occurs in an observable, its error() callback is called. Here is an example of handling errors in our observable:

const observable = new Observable((observer) => {
  try {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    throw new Error('Observable error');
  } catch (error) {
    observer.error(error);
  }
  observer.next(4);
  observer.next(5);
  observer.complete();
});

observable.subscribe({
  next: (value) => console.log(value),
  error: (error) => console.error(error),
  complete: () => console.log('Observable complete'),
});

In this example, we throw an error after emitting the values 1 to 3. The catch block catches the error and calls the observer.error() method, which triggers the error() callback in the subscribe() method.

Using Operators

Observables in Angular can be transformed using operators, which allow us to process and manipulate the data emitted by the observable stream. The rxjs library provides many built-in operators, such as map(), filter(), and reduce().

Here is an example of using the map() operator to transform the values emitted by our observable:

import { map } from 'rxjs/operators';

const observable = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.next(4);
  observer.next(5);
  observer.complete();
});

observable.pipe(
  map((value) => value * 2)
).subscribe({
  next: (value) => console.log(value),
  error: (error) => console.error(error),
  complete: () => console.log('Observable complete'),
});

In this example, we use the map() operator to multiply each emitted value by 2. We pipe the operator onto the observable using the pipe() method, and then subscribe to the transformed observable as usual.

Conclusion

In this guide, we have covered the basics of using observables in Angular. We have seen how to create and subscribe to an observable, how to handle errors, and how to use operators to transform the emitted data.

Observables are a powerful tool for managing asynchronous data streams in Angular, and can make your application much more responsive and interactive.