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?
But as useful and as powerful as RxJS can be, it has a steep learning curve:
- It incorporates concepts from functional programming, reactive programming, and the observer pattern.
- It requires a shift in mindset from imperative programming to declarative programming.
- It provides a huge API, with over a hundred different operators.
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
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:
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:
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:
- What do you get when you combine an observable and an observer into one? Subjects! Read all about them here: http://reactivex.io/rxjs/manual/overview.html#subject
- There are over a hundred operators in RxJS! Dive in here: http://reactivex.io/documentation/operators.html#alphabetical