To get the most from RxJS, it's important to understand its terminology and one of the key terms is Observable.

What Is an Observable?

An Observable is a collection of items over time. It is one of the key building blocks of RxJS.

A normal collection, such as an array, retains items you can access. An Observable doesn't retain items. You can only observe items as they are emitted.

In that respect, an Observable is like a drive-up window: The person at the window emits food items over time.

What Does an Observable Do?

An Observable doesn't do anything until a consumer subscribes. (More on subscriptions in a later post.)

When subscribed, the Observable begins emitting items or notifications to that consumer.

An Observable provides the following notifications:

next: The next item is emitted
error: An error occurred and no more items will be emitted
complete: No more items will be emitted

How Does an Observable Emit?

An Observable can emit items synchronously or asynchronously.

An Observable can emit one item and complete, such as the response returned from an asynchronous Http request.

An Observable can emit multiple items and complete.

An Observable can emit an infinite number of items, such as the location of each mouse move or key press.

Here is an oversimplified version of a marble diagram depicting two Observables.

The first Observable is "one and done", meaning it emits once and then completes. This is the type of Observable you'll get when using Angular's Http methods. In this example, the emitted returned response is an array of products.

The second Observable is "infinite", meaning it will continue to emit values until it's completed. In this example, it's emitting each key press.

How Do You Create an Observable?

With Angular, an Observable is automatically created and returned when using features, such as Http.

  products$ = this.http.get<Product[]>(this.productsUrl)
    .pipe(
      tap(data => console.log(JSON.stringify(data))),
      catchError(this.handleError)
    );

You can create your own Observable with the new keyword.

const source$ = new Observable();

However, this technique is not often used. In most cases, it's best to create an Observable using a creation function, discussed in a later post.

See the comments section of this post for a good example of when you would want to use new Observable() to wrap the functionality of a third-party API.

I hope that's clarified the meaning of the term Observable.