Observables

We’ll start from the basics and work our way up. We’ll be stepping away from our project for this example. Once we have a good understanding of RxJS, we’ll look at how this ties into our application.

Terminology

Half the battle of learning RxJS is understanding the terminology. The first term we’ll learn is observable. According to the dictionary, the word observe means to watch something. Therefore, we can conclude that an observable is the thing we’re watching.

This leads us to further questions. What are we watching, and why?

Concerning RxJS, an observable is an object. When we create an observable, we’re watching an object. What exactly are we watching for? Values! An observable is an object that emits values. It is the source of values.

Creating an observable

Let’s create an observable with RxJS. For this example, we’ll create an <input> element to listen for the input event. In Vanilla JavaScript, we would do the following:

const input = document.querySelector('input');

input.addEventListener('input', (event) => {
  // Some code here...
});

In RxJS, we’ll do the following.