In a web application, one of the most challenging tasks is dealing with the asynchronous nature of the web. An application cannot predict when events such as requests to the backend, changing routes, and simple user interactions will happen. Imperative programming in these cases is more complex and susceptible to errors.
The RxJS library that makes up the Angular ecosystem aims to make controlling asynchronous flows simpler using declarative and reactive programming.
In this chapter, we will cover the following topics:
- Observables and operators
- Handling data – transformation operators
- Another way to subscribe – the async pipe
- Connecting information flows – high-order operators
- Optimizing data consumption – filter operators
- How to choose the correct operator
By the end of the chapter, you will be able to create better experiences for your users by integrating their actions with backend requests.
Technical requirements
To follow the instructions in this chapter, you’ll need the following:
- Visual Studio Code (https://code.visualstudio.com/Download)
- Node.js 18 or higher (https://nodejs.org/en/download/)
The code files for this chapter are available at .
During this chapter, remember to run the backend of the application found in the gym-diary-backend folder with the npm start command.
Observables and operators
Up until this point, we’ve used observables as a way to capture the data that came from the backend API using the subscribe method, but let’s take a step back and ask what an observable is and why we don’t just use JavaScript promises.
Let’s use a table to organize our explanation:
| Single | Multiple | |
| Synchronous | Function | Iterator |
| Asynchronous | Promise | Observable |
Table 9.1 – Types of objects by requirement
When we need to perform synchronous processing and expect a return value, we use a function. If we need a collection of synchronous values, we use an object of the Iterator type. We use promises when we need the return value of a function, but its processing is asynchronous.
But what can we use for asynchronous processing that does not return a value but a collection of values that can be distributed over time as events? The answer to that need is an observable! With this data structure, we can capture a series of events in time and declaratively make our application react to these events.
Regarding the use of promises for HTTP requests, we can use them, but tasks that are verbose and complex to perform when using promises can be done using observables and RxJS instead. We can say that everything a promise can do, an observable is also capable of doing, but vice versa, this becomes complex.
In Angular, most asynchronous events are mapped and controlled by observables. In addition to HTTP requests, user typing, the exchange of routes by the application, and even the life cycle of components are controlled by observables as they are events that occur over time.
We can think of these events as flows of information, and RxJS and the concept of observables can manipulate these flows and make our application react to them. The main resources for manipulating this flow are the RxJS operators, which are functions that receive and return data to this flow.
In the next section, we’ll start with the operator that will transform the stream data.