Create an RxJS Observable

We are going to create a simple Observable that counts from zero on. We will create it in Angular and link an example in React, but remember that RxJS is agnostic to frameworks and libraries.

Be aware that there are better ways to create an Observable.

It is recommended to use built-in creation functions. As reported in the documentation, “Most commonly, observables are created using creation functions, like of, from, interval, etc“. However, for the sake of simplicity, we will use new Observable and we will have a look at creation functions later.

Creating an Observable

The process to create an Observable is fairly straightforward.

First of all, we need to import Observable from rxjs.

Then, we create an Observable by calling the new Observable constructor that takes one argument. In the following example, we create an Observable that emits a number every second to a subscriber.

// app.component.ts

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

const myObservable = new Observable((observer) => {
  let count = 0;

  setInterval(() => {
    observer.next(count);
    count++;
  }, 1000);
});

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {}

As it is, nothing will happen because we need to subscribe to an Observable to consume its values.

Subscribing to the Observable

The first step required us to create an Observable. Now, we want to log the values that are coming from this Observable to the console.

Remember that an Observable delivers three types of notifications to the Observer:

• next: sends data (i.e. Numbers, Strings, Objects, etc.)
• error: sends a JavaScript Error or exception. Nothing else will be delivered afterwards.
• complete: does not send a value. Nothing else will be delivered afterwards. We will start by subscribing to the Observable.

Every time we call observable.subscribe, the call triggers an execution that is independent and unique to that given subscriber.

In other words, “A subscribe call is simply a way to start an “Observable execution” and deliver values or events to an Observer of that execution“, rxjs.dev.

mySubscription = myObservable.subscribe(data => console.log(data));

If we take a look at the console, we notice that we are already logging the values from the Observable. However, to be precise, we should say that this is the outcome of executing an Observable. “The execution produces multiple values over time, either synchronously or asynchronously“, rxjs.dev.

Here you can find the Angular code and the React code up to this point. Since you need a server (Angular or React application) to run the code, you can also see the code running live on StackBlitz (Angular, React).

This is pretty much what you need to know to start using Observables. If you want to know more, there is an extension to this post where we add more to the Observer with next, error, and complete.

As always, feedback is welcome!