RxJS for Angular Developers, Part 1

10july2019

By

For the most part, Angular is a straightforward framework. But RxJS is a common stumbling point for Angular beginners. This article will introduce RxJS, explain why it’s an essential tool for Angular developers, and give a quick overview of Observables. In Part 2, we will cover some of the most common RxJS operators and provide some sample use cases to demonstrate the versatility of RxJS. Finally, Part 3 will cover some of the common pitfalls that developers encounter with RxJS, and the best practices that will help you avoid them.

What is RxJS?

RxJS (Reactive Extensions for JavaScript) is a library that simplifies asynchronous processing of data or event streams, which are represented by Observables. Observables allow us to implement complex asynchronous functionality without having to worry about managing state or error handling at every step. 

But as useful and as powerful as RxJS can be, it has a steep learning curve:

Despite this, learning RxJS is certainly worth the effort for any Angular developer.

RxJS and Angular

RxJS is a general-purpose library for asynchronous programming, and can be used in a wide variety of ways. But Angular developers are usually first introduced to it in one of three ways:

  • Angular’s HttpClient returns observables from HTTP method calls.
  • Path parameters and query parameters are provided through Angular’s ActivatedRoute service in the form of observables.
  • Events are passed from child to parent components in Angular using an EventEmitter. EventEmitter is a subclass of an RxJS type called Subject, which is itself a subclass of Observable.

Because observables are used so widely by the framework itself, you can’t go far with Angular without learning some RxJS.

Getting Started with Observables

Creating Observables

An Observable represents a stream of values or events over time. Observables can be created from HTTP requests, from user interactions, such as mouse clicks/movements or keypresses, using time intervals, or even just from an array of values. For example, here is an observable created from a timer that fires once per second.

 

Subscribing and Unsubscribing

As you saw in the previous example, after we created our intervalObservable, we subscribed to it. Most observables are cold observables, which means they won’t start publishing values until someone subscribes (Hot vs cold observables will be covered in more detail in Part 3). When we subscribed, we passed in a callback function as a parameter. This function is called every time the observable emits. In the example, we used it to display the output of the observable. We can also optionally pass in functions for handling errors and for handling the end of the stream:

 

Subscribing to an observable returns a Subscription. Once we no longer need it, we can call the unsubscribe on the Subscription to clean it up. For example:

 

Manipulating Observables

The values emitted by observables can be manipulated by operators. Operators are added to an observable using the pipe method. For example, if you wanted the observable from the previous example to count by tens and stop once it reaches 100, you could use the map and takeWhile operators inside the pipe:

 

Further reading

Below are some related topics for you to check out.  Stay tuned for Part 2 and Part 3 of this series and, meantime, check out these additional sources of information:

References