Angular Observable Tutorial Using RxJs

The Angular Observable tutorial covers how to use RxJS Observables in Angular application. When we talk about Angular Observable, we hear a lot of terms like Reactive programming, data streams, Observable, Observers, RxJS, etc. It is very important to understand these terms before we start using the observables

Rx stands from Reactive programming. It is defined as programming with asynchronous data streams. So it is important that you understand what is data stream is.

Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10

What is a data stream

A stream is a data, which arrives over a period of time. The stream of data can be anything. Like variables, user inputs, properties, caches, data structures, and even failures, etc

Consider the example of a sequence of x & y positions of mouse click events. Assume that user has clicked on the locations (12,15), (10,12), (15,20) & (17,15) in that order.

The following diagram shows how the values arrive over a period of time. As you can see stream emits the values as they happen i.e asynchronously.

mouse click events as data streams
mouse click events as data streams


Best Angular Books
The Top 8 Best Angular Books, which helps you to get started with Angular  

Value is not the only thing that stream emits. The stream may complete as the user closes the window or app. Or an error may happen which results in the closure of the stream. At any point in time stream may emit any of the following three things

Value: i.e the next value in the stream
Complete: The stream has ended
Error: The error has stopped the stream.

The following diagram shows all the three possibilities in a stream

mouse click events as data streams with emit error and complete events
mouse click events as data streams with emit error and complete events

As said earlier the stream of data can be anything. For Example

  • Mouse click or Mouse hover events with x & y positions
  • Keyboard events like keyup, keydown, keypress, etc
  • Form events like value changes etc
  • Data which arrives after an HTTP request
  • User Notifications
  • Measurements from any sensor

Important Points regarding streams can

  • emit zero, one or more values of any time.
  • can also emit errors.
  • must emit the complete signal, when completes (finite streams).
  • can be infinite, that they never complete

Now, we have understood what is a data stream, let us look at what is Reactive Programming is

Reactive Programming

The reactive programming is all about creating the stream, emitting value, error or complete signals, manipulate, transfer or do something useful with the data streams.

This is where the RxJs comes into the picture

The introduction to Reactive Programming you’ve been missing gives you a very nice introduction to Reactive Programming. Introduction to Rx

What is RxJS

The RxJS (Reactive Extensions Library for JavaScript) is a javascript library, that allows us to work with asynchronous data streams

The Angular uses the RxJS library heavily in its framework to implement Reactive Programming. Some of the examples where reactive programming used are

  • Reacting to an HTTP request
  • Value changes / Status Changes in Angular Forms
  • The Router and Forms modules use observables to listen for and respond to user-input events.
  • You can define custom events that send observable output data from a child to a parent component.
  • The HTTP module uses observables to handle AJAX requests and responses.

The RxJs has two main players

  1. Observable
  2. Observers ( Subscribers)

What is an Observable

Observable converts the ordinary stream of data into an observable stream of data. It observes the stream of data and emits the value, complete or error signals to the consumers of the stream

You can think of Observable it as a wrapper around the stream of data.

Observables are declarative. You define an observable function just like any other variable. The observable function executes only when someone subscribes to it.

Who are observers (subscribers)

The Observable on its own is useless unless someone consumes the value delivered by the observable. We call them observers or subscribers.

The observable communicates with the observers using callbacks

The observer must subscribe with the observable to receive the value from the observer. While subscribing it optionally passes the three callbacks. next(), error() & complete()

Angular Observable Tutorial how observable and observers communicates with callbacks
Angular Observable Tutorial how observable and observers communicates with callbacks

The observable starts emitting the value as soon as observer or consumer subscribes to it.

The observable invokes the next() callback whenever the value arrives in the stream. It passes the value as the argument to the next callback. If the error occurs, then the error() callback is invoked. It invokes the complete() callback when the stream completes.

  • Observers/subscribers subscribe to Observables
  • Observer registers three callbacks with the observable at the time of subscribing. i .e next(), error() & complete()
  • All three callbacks are optional
  • The observer receives the data from the observer via the next() callback
  • They also receive the errors and completion events from the Observable via the error() & complete() callbacks

Angular Observable tutorial

Now, we have learned the basics of the RxJs Observable, let us now see how it works using an example.

Create a new project in angular. Remove the contents from app.component.html. Open the app.component.ts

Import the required libraries

RxJs library is installed automatically when you create the Angular project. Hence there is no need to install it.

Import the Observable from the rxjs library

Observable Creation

There are few ways in which you can create observable in angular. Simplest is to use the Observable constructor. The observable constructor takes observer (or subscriber) as its argument. The subscriber will run when this observable’s subscribe() method executes.

The following example creates an observable of a stream of numbers 1, 2, 3, 4, 5

The variable obs is now of the type of observable.

The above example declares the obs as the observable but does not instantiate it. To make the observable to emit values, we need to subscribe to it.

Creating observable in Angular Observable Tutorial app
Creating observable in Angular Observable Tutorial app

In the above example, we used the Observable Constructor to create the Observable. There are many operators available with the RxJS library, which makes the task of creating the observable easy. These operators help us to create observable from an array, string, promise, any iterable, etc. Here are list some of the commonly used operators

Subscribing to the observable

We subscribe to the observable, by invoking the subscribe method on it. We can optionally, include the three callbacks next(), error() & complete() as shown below

The complete app.component.ts code is as shown below.

Now, run the code and watch the debug window.

Adding interval

We can add a timeout to insert a delay in each next() callback

Angular Observable tutorial example app
Angular Observable tutorial example app

Error event

As mentioned earlier, the observable can also emit an error. This is done by invoking the error() callback and passing the error object. The observables stop after emitting the error signal. Hence values 4 & 5 are never emitted.

You can send the error object as the argument to the error method

Observable with error event
Observable with the error event

Complete Event

Similarly the complete event. The observables stop after emitting the complete signal. Hence values 4 & 5 are never emitted.

Observable with complete event
Observable with complete event

Operators

The power of observable comes from the operators.

The RxJs library several functions or operators to manipulate the observable data stream. The following table lists some of the commonly used operators

AREAOPERATORS
CombinationcombineLatest, concat, merge, startWith , withLatestFrom, zip
FilteringdebounceTime, distinctUntilChanged, filter, take, takeUntil
TransformationbufferTime, concatMap, map, mergeMap, scan, switchMap
Utilitytap
Multicastingshare

References

  1. observables
  2. RX-library
  3. observables in angular
  4. Practical observable usage
  5. Comparing observables
  6. Observable Design Pattern

Summary

Reactive programming is about programming the stream. The RxJS library brings Reactive Programming into the Angular. Using RxJs, we can create an observable, which can emit next value, error and complete signals to the subscriber of the observable.

In the next few tutorials, we will learn more about the RxJs Observable

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top