RxJS in Angular — Make your code more Reactive and Declarative

Jawadhasan
6 min readOct 15, 2023
Photo by israel palacio on Unsplash

Introduction

In previous post, we started with the basics of RxJS and observables. We saw few examples of creating observables from existing data and various RxJS operators to transform, filter and process observables.

Today, we’ll build upon those learning and see how to work with HTTP data using RxJS. If you haven’t already you can check the previous post on this link.

Setup

I’ll be using an existing angular application and if you are following along, this is the same code base from my other angular articles.

The source code is available from this git repo.

I’ve added one component to encapsulate demos for this post.

Angular Http Client

The Http Client in @angular/common/http offers a simplified client HTTP API for Angular applications that rests on the XMLHttpRequest interface exposed by browsers. Some additional benefits of HttpClient include testability features, typed request and response objects, request and response interception, Observable APIs, and streamlined error handling. We are using HttpClient to fetch data from the server to our application.

Following code shows the UsersService which uses HttpClient

Procedural Data Retrieval

Following is how UsersComponent currently uses the UsersService to get the data and store it to local users array in component.

The template then displays the data as shown below

and following is the output

--

--

Jawadhasan

Software Solutions Team Lead | Cloud Architect | Solutions Architect