Understanding, creating and subscribing to observables in Angular

What are Observables?

Observables in RxJS are a collection of multiple values that come over time. Observables are lazy. These are push collections of multiple values. It acts as a support between publishers and subscribers. It can deliver multiple values of different types. An application can subscribe to these observables and unsubscribe when done. 

Creating and Subscribing Observables

We can create observables using different ways. RxJS package gives us various means to create observables. We can create observable using the interval function of RxJS as follows:

import { interval } from 'rxjs';

const myObs = interval(1000).subscribe(x=>{
  console.log(x);
})

myObs.unsubscribe();

Once we call the subscribe() method on the observable, we can see data on the console. We will pass an anonymous function as the first argument to subscribe() function. Here x is the handler called observer which is the handler for all the data values and notifications that are emitted by the observable. Now it will start consoling values one by one. Interval() is the built-in function. We have used this function to create an observable here which will fire a value after every second. It will keep on logging values on the console until we unsubscribe the observable. The main step is to unsubscribe the observable to ensure any memory leak using the unsubscribe() method. 

Creating and Subscribing Observables

We can create observable using Observable.create() method. We have used the setInterval() method to create our observable which will log some value every second. When we use Observable.create() function we will have one handler called observer for the emitted values. We can call different methods on this observer as it implements the observer interface. We have used the next() method to push values.

After we create an observable, we need to subscribe to it using subscribe() method. After subscription, we are showing value on the console.  

The last main step is that we need to call the unsubscribe() method on the subscription. We need to store our subscription in some variable and then call the unsubscribe() method.

const myObservable = Observable.create((observer)=>{
  setInterval(()=>{
    observer.next("Observable created");
  },1000)
  });

const mySubscription = myObservable.subscribe(x=>{
  console.log(x);
});

mySubscription.unsubscribe(); // Unsubscribe the subscription

What is an observer?

A handler for receiving observable notifications implements the observer interface. An observer is an object that defines callback methods to handle any three kinds of notifications that an observable can send.

  • next - Required. It handles each delivered value. It can be called zero or multiple times after execution takes place.
  • error - Optional. It handles the error notification. If the error occurs, it will halt the execution of that specified observable instance.
  • completes - Optional. Handles the execution-complete notification. In case of delayed values, values will be delivered to the next handler after execution is complete.

const myObserver = {
  next: x => console.log('Observer value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer completed'),
};

Comments