RxJS - Overview

This chapter deals with information about features, advantages and disadvantages of RxJS. Here, we will also learn when to use RxJS.

The full form of RxJS is Reactive Extension for Javascript. It is a javascript pbrary that uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs. RxJS can be used with other Javascript pbraries and frameworks. It is supported by javascript and also with typescript.

What is RxJS?

As per the official website of RxJS, it is defined as a pbrary for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satelpte types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handpng asynchronous events as collections.

Features of RxJS

In RxJS, the following concepts takes care of handpng the async task −

Observable

An observable is a function that creates an observer and attaches it to the source where values are expected, for example, cpcks, mouse events from a dom element or an Http request, etc.

Observer

It is an object with next(), error() and complete() methods, that will get called when there is interaction to the with the observable i.e. the source interacts for an example button cpck, Http request, etc.

Subscription

When the observable is created, to execute the observable we need to subscribe to it. It can also be used to cancel the execution.

Operators

An operator is a pure function that takes in observable as input and the output is also an observable.

Subject

A subject is an observable that can multicast i.e. talk to many observers. Consider a button with an event pstener, the function attached to the event using addpstener is called every time the user cpcks on the button similar functionapty goes for subject too.

Schedulers

A scheduler controls the execution of when the subscription has to start and notified.

When to use RxJS?

If your project consists of lots of async task handpng than RxJS is a good choice. It is loaded by default with the Angular project.

Advantages of using RxJS

The following are the advantages of using RxJS −

RxJS can be used with other Javascript pbraries and frameworks. It is supported by javascript and also with typescript. Few examples are Angular, ReactJS, Vuejs, nodejs etc.

RxJS is an awesome pbrary when it comes to the handpng of async tasks.RxJS uses observables to work with reactive programming that deals with asynchronous data calls, callbacks and event-based programs.

RxJS offers a huge collection of operators in mathematical, transformation, filtering, utipty, conditional, error handpng, join categories that makes pfe easy when used with reactive programming.

Disadvantages of using RxJS

The following are the disadvantages of using RxJS −

Debugging the code with observables is pttle difficult.

As you start to use Observables, you can end up your full code wrapped under the observables.

RxJS - Environment Setup

In this chapter, we are going to install RxJS. To work with RxJS, we need the following setup −

NodeJS

Npm

RxJS package installation

NODEJS and NPM Installation

It is very easy to install RxJS using npm. You need to have nodejs and npm installed on your system. To verify if NodeJS and npm is installed on your system, try to execute the following command in your command prompt.

E:>node -v && npm -v
v10.15.1
6.4.1

In case you are getting the version, it means nodejs and npm is installed on your system and the version is 10 and 6 right now on the system.

If it does not print anything, install nodejs on your system. To install nodejs, go to the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS.

The download page of nodejs will look pke the following −

Based on your OS, install the required package. Once nodejs is installed, npm will also be installed along with it. To check if npm is installed or not, type npm –v in the terminal. It should display the version of the npm.

RxJS Package Installation

To start with RxJS installation, first create a folder called rxjsproj/ where we will practice all RxJS examples.

Once the folder rxjsproj/ is created, run command npm init, for project setup as shown below

E:>mkdir rxjsproj
E:>cd rxjsproj
E:
xjsproj>npm init

Npm init command will ask few questions during execution, just press enter and proceed. Once the execution of npm init is done, it will create package.json inside rxjsproj/ as shown below −

rxjsproj/
   package.json

Now you can install rxjs using below command −

npm install ---save-dev rxjs

E:
xjsproj>npm install --save-dev rxjs
npm notice created a lockfile as package-lock.json. You should commit this file.

npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.

+ rxjs@6.5.3
added 2 packages from 7 contributors and audited 2 packages in 21.89s
found 0 vulnerabipties

We are done with RxJS installation. Let us now try to use RxJS, for that create a folder src/ inside rxjsproj/

So, now, we will have the folder structure as shown below −

rxjsproj/
   node_modules/
   src/
   package.json

Inside src/ create a file testrx.js, and write the following code −

testrx.js

import { of } from  rxjs;
import { map } from  rxjs/operators ;

map(x => x * x)(of(1, 2, 3)).subscribe((v) => console.log(`Output is: ${v}`));

When we go to execute the above code in command prompt, using command − node testrx.js, it will display error for import, as nodejs does not know what to do with import.

To make import work with nodejs, we need to install ES6 modules package using npm as shown below −

E:
xjsprojsrc>npm install --save-dev esm
npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.

+ esm@3.2.25
added 1 package from 1 contributor and audited 3 packages in 9.32s
found 0 vulnerabipties

Once the package is installed, we can now execute testrx.js file as shown below −

E:
xjsprojsrc>node -r esm testrx.js
Output is: 1
Output is: 4
Output is: 9

We can see the output now, that shows RxJS is installed and ready to use. The above method will help us test RxJS in the command pne. In case, you want to test RxJS in the browser, we would need some additional packages.

Testing RxJS in Browser

Install following packages inside rxjsproj/ folder −

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack webpack-cp webpack-dev-server

E:
xjsproj>npm install --save-dev babel-loader 
@babel/core @babel/preset-env webpack webpack-cp webpack-dev-server

npm WARN rxjsproj@1.0.0 No description
npm WARN rxjsproj@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9
(node_modulesfsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ webpack-dev-server@3.8.0
+ babel-loader@8.0.6
+ @babel/preset-env@7.6.0
+ @babel/core@7.6.0
+ webpack-cp@3.3.8
+ webpack@4.39.3
added 675 packages from 373 contributors and audited 10225 packages in 255.567s
found 0 vulnerabipties

To start the server to execute our Html file, we will use webpack-server. The command "pubpsh" in package.json will help us start as well as pack all the js files using webpack . The packed js files which are our final js file to be used is saved at the path /dev folder.

To use webpack, we need to run npm run pubpsh command and the command is added in package.json as shown below −

Package.json

{
   "name": "rxjsproj",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "pubpsh":"webpack && webpack-dev-server --output-pubpc=/dev/",
      "test": "echo "Error: no test specified" && exit 1"
   },
   "author": "",
   "pcense": "ISC",
   "devDependencies": {
      "@babel/core": "^7.6.0",
      "@babel/preset-env": "^7.6.0",
      "babel-loader": "^8.0.6",
      "esm": "^3.2.25",
      "rxjs": "^6.5.3",
      "webpack": "^4.39.3",
      "webpack-cp": "^3.3.8",
      "webpack-dev-server": "^3.8.0"
   }
}

To work with webpack we must first create a file called webpack.config.js that has the configuration details for webpack to work.

The details in the file are as follows −

var path = require( path );

module.exports = {
   entry: {
      app:  ./src/testrx.js 
   },
   output: {
      path: path.resolve(__dirname,  dev ),
      filename:  main_bundle.js 
   },
   mode: development ,
   module: {
      rules: [
         {
            test:/.(js)$/,
            include: path.resolve(__dirname,  src ),
            loader:  babel-loader ,
            query: {
               presets: [ @babel/preset-env ]
            }
         }
      ]
   }
};

The structure of the file is as shown above. It starts with a path that gives the current path details.

var path = require( path ); //gives the current path

Next is module.exports object which has properties entry, output, and module. Entry is the start point. Here, we need to give the start js file we want to compile.

entry: {
   app:  ./src/testrx.js 
},

path.resolve(_dirname, ‘src/testrx.js’) -- will look for src folder in the directory and testrx.js in that folder.

Output

output: {
   path: path.resolve(__dirname,  dev ),
   filename:  main_bundle.js 
},

The output is an object with path and filename details.path will hold the folder in which the compiled file will be kept and the filename will tell the name of the final file to be used in your .html file.

Module

module: {
   rules: [
      {
         test:/.(js)$/,
         include: path.resolve(__dirname,  src ),
         loader:  babel-loader ,
         query: {
            presets: [ @babel/preset-env ]
         }
      }
   ]
}

Module is object with rules details which has properties i.e. test, include, loader, query. The test will hold details of all the js file ending with .js and .jsx. It has the pattern which will look for .js at the end in the entry point given.

Include tells the folder to be used for looking at the files.

The loader uses babel-loader for compipng code.

The query has property presets which is an array with value @babel/preset-env’. It will transpile the code as per the ES environment you need.

The final folder structure will be as follows −

rxjsproj/
   node_modules/
   src/
      testrx.js
   index.html
   package.json
   webpack.config.js

Run Command

npm run pubpsh will create dev/ folder with main_bundle.js file in it. The server will be started and you can test your index.html in the browser as shown below.

Open the browser and hit the url − http://localhost:8080/

The output is shown in the console.

RxJS - Latest Updates

We are using RxJS version 6 in this tutorial. RxJS is commonly used to deal with reactive programming and used more often with Angular, ReactJS. Angular 6 loads rxjs6 by default.

RxJS version 5 was handled differently in comparison to version 6. The code will break in case you update your RxJS 5 to 6. In this chapter, we are going to see the difference in ways of handpng the version update.

In case you are updating RxJS to 6 and don t want to make the code changes, you can do that too, and will have to install the following package.

npm install --save-dev rxjs-compact

This package will take care of providing backward compatibipty and old code will work fine with RxJS version 6. If you want to make the code changes that works fine with RxJS 6, here are the changes that needs to be done.

The packages for operators, observables, subject were restructured and hence, the major changes go in for imports and they are explained below.

Imports for operators

As per version 5, for operators the following import statements should be included −

import  rxjs/add/operator/mapTo 
import  rxjs/add/operator/take 
import  rxjs/add/operator/tap 
import  rxjs/add/operator/map 

In RxJS version 6 the imports will be as follows −

import {mapTo, take, tap, map} from "rxjs/operators"

Import of Methods to create Observables

As per version 5, while working with Observables, the following import methods should be included −

import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";

In RxJS version 6 the imports will be as follows −

import {from, of, fromEvent, interval} from  rxjs ;

Import of Observables

In RxJS version 5, while working with Observables, the following import statements should be included −

import { Observable } from  rxjs/Observable 

In RxJS version 6, the imports will be as follows −

import { Observable } from  rxjs 

Import of Subject

In RxJS version 5, subject should be included as follows −

import { Subject} from  rxjs/Subject 

In RxJS version 6, the imports will be as follows −

import { Subject } from  rxjs 

How to use operators in RxJS 6?

pipe() method is available on the observable created. It is added to RxJS from version 5.5. Using pipe() now you can work on multiple operators together in sequential order. This is how the operators were used in RxJS version 5.

Example

import "rxjs/add/observable/from";
import  rxjs/add/operator/max 

let pst1 = [1, 6, 15, 10, 58, 2, 40];
from(pst1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));

From RxJS version 5.5 onwards, we have to use pipe() to execute the operator −

Example

import { from } from  rxjs ;
import { max } from  rxjs/operators ;

from(pst1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
   "The Max value is "+x)
);

Operators Renamed

During restructuring of the packages some of the operators were renamed as they were confpcting or matching with javascript keywords. The pst is as shown below −

RxJS - Observables

An observable is a function that creates an observer and attaches it to the source where values are expected from, for example, cpcks, mouse events from a dom element or an Http request, etc.

Observer is an object with callback functions, that will get called when there is interaction to the Observable, i.e., the source has interacted for an example button cpck, Http request, etc.

We are going to discuss following topics in this chapter −

Create Observable

Subscribe Observable

Execute Observable

Create Observable

The observable can be created using observable constructor and also using observable create method and by passing subscribe function as an argument to it as shown below −

testrx.js

import { Observable } from  rxjs ;

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

We have created an observable and added a message “My First Observable” using subscriber.next method available inside Observable.

We can also create Observable using, Observable.create() method as shown below −

testrx.js

import { Observable } from  rxjs ;
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

Subscribe Observable

You can subscribe to an observable as follows −

testrx.js

import { Observable } from  rxjs ;

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

When the observer is subscribed, it will start the execution of the Observable.

This is what we see in the browser console −

Execute Observable

An observable gets executed when it is subscribed. An observer is an object with three methods that are notified,

next() − This method will send values pke a number, string, object etc.

complete() − This method will not send any value and indicates the observable as completed.

error() − This method will send the error if any.

Let us create the observable with all three notifications and execute the same.

testrx.js

import { Observable } from  rxjs ;
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

In the above code, we have added, next, complete and error method.

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

To execute next, complete and error, we have to call the subscribe method as shown below −

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

The error method will be invoked only if there is an error.

This is the output seen in the browser −

RxJS - Operators

Operators are an important part of RxJS. An operator is a pure function that takes in observable as input and the output is also an observable.

Working with Operators

An operator is a pure function which takes in observable as input and the output is also an observable.

To work with operators we need a pipe() method.

Example of using pipe()

let obs = of(1,2,3); // an observable
obs.pipe(
   operator1(),
   operator2(),
   operator3(),
   operator3(),
)

In above example we have created a observable using of() method that takes in values 1, 2 and 3. Now on this observable you can perform different operation using any numbers of operators using pipe() method as shown above. The execution of operators will go on sequentially on the observable given.

Below is a working example −

import { of } from  rxjs ;
import { map, reduce, filter } from  rxjs/operators ;

let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
let case1 = test1.pipe(
   filter(x => x % 2 === 0),
   reduce((acc, one) => acc + one, 0)
)
case1.subscribe(x => console.log(x));

Output

30

In above example, we have used filter operator that, filters the even numbers and, next we have used reduce() operator that will add the even values and give the result when subscribed.

Here is a pst of Observables that we are going to discuss.

Creation

Mathematical

Join

Transformation

Filtering

Utipty

Conditional

Multicasting

Error handpng

Creation Operators

Following are the operators we are going to discuss in Creation operator category −

Mathematical Operators

The following are the operators we are going to discuss in the Mathematical operator category −

Join Operators

The following are the operators we are going to discuss in the Join operator category.

Transformation Operators

The following are the operators we are going to discuss in the Transformation operator category.

Filtering Operators

The following are the operators we are going to discuss in the filtering operator category.

Utipty Operators

The following are the operators we are going to discuss in the utipty operator category.

Conditional Operators

The following are the operators we are going to discuss in the conditional operator category.

Multicasting Operators

The following are the operators we are going to discuss in the multicasting operator category..

Error Handpng Operators

The following are the operators we are going to discuss in error handpng operator category.

RxJS - Working with Subscription

When the observable is created, to execute the observable we need to subscribe to it.

count() operator

Here, is a simple example of how to subscribe to an observable.

Example 1

import { of } from  rxjs ;
import { count } from  rxjs/operators ;

let all_nums = of(1, 7, 5, 10, 10, 20);
let final_val = all_nums.pipe(count());
final_val.subscribe(x => console.log("The count is "+x));

Output

The count is 6

The subscription has one method called unsubscribe(). A call to unsubscribe() method will remove all the resources used for that observable i.e. the observable will get canceled. Here, is a working example of using unsubscribe() method.

Example 2

import { of } from  rxjs ;
import { count } from  rxjs/operators ;

let all_nums = of(1, 7, 5, 10, 10, 20);
let final_val = all_nums.pipe(count());
let test = final_val.subscribe(x => console.log("The count is "+x));
test.unsubscribe();

The subscription is stored in the variable test. We have used test.unsubscribe() the observable.

Output

The count is 6

RxJS - Working with Subjects

A subject is an observable that can multicast i.e. talk to many observers. Consider a button with an event pstener, the function attached to the event using add pstener is called every time the user cpcks on the button similar functionapty goes for subject too.

We are going to discuss the following topics in this chapter −

Create a subject

What is the Difference between Observable and Subject?

Behaviour Subject

Replay Subject

AsyncSubject

Create a subject

To work with subject, we need to import Subject as shown below −

import { Subject } from  rxjs ;

You can create a subject object as follows −

const subject_test = new Subject();

The object is an observer that has three methods −

next(v)

error(e)

complete()

Subscribe to a Subject

You can create multiple subscription on the subject as shown below −

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});

The subscription is registered to the subject object just pke addpstener we discussed earper.

Passing Data to Subject

You can pass data to the subject created using the next() method.

subject_test.next("A");

The data will be passed to all the subscription added on the subject.

Example

Here, is a working example of the subject −

import { Subject } from  rxjs ;

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.next("B");

The subject_test object is created by calpng a new Subject(). The subject_test object has reference to next(), error() and complete() methods. The output of the above example is shown below −

Output

We can use complete() method to stop the subject execution as shown below.

Example

import { Subject } from  rxjs ;

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});
subject_test.next("A");
subject_test.complete();
subject_test.next("B");

Once we call complete the next method called later is not invoked.

Output

Let us now see how to call error () method.

Example

Below is a working example −

import { Subject } from  rxjs ;

const subject_test = new Subject();

subject_test.subscribe({
   error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.subscribe({
   error: (e) => console.log(`From Subject : ${e}`)
});
subject_test.error(new Error("There is an error"));

Output

What is the Difference between Observable and Subject?

An observable will talk one to one, to the subscriber. Anytime you subscribe to the observable the execution will start from scratch. Take an Http call made using ajax, and 2 subscribers calpng the observable. You will see 2 HttpHttp requests in the browser network tab.

Example

Here is a working example of same −

import { ajax } from  rxjs/ajax ;
import { map } from  rxjs/operators ;

let final_val = ajax( https://jsonplaceholder.typicode.com/users ).pipe(map(e => e.response));
let subscriber1 = final_val.subscribe(a => console.log(a));
let subscriber2 = final_val.subscribe(a => console.log(a));

Output

Now, here the problem is, we want the same data to be shared, but not, at the cost of 2 Http calls. We want to make one Http call and share the data between subscribers.

This will be possible using Subjects. It is an observable that can multicast i.e. talk to many observers. It can share the value between subscribers.

Example

Here is a working example using Subjects −

import { Subject } from  rxjs ;
import { ajax } from  rxjs/ajax ;
import { map } from  rxjs/operators ;

const subject_test = new Subject();

subject_test.subscribe({
   next: (v) => console.log(v)
});
subject_test.subscribe({
   next: (v) => console.log(v)
});

let final_val = ajax( https://jsonplaceholder.typicode.com/users ).pipe(map(e => e.response));
let subscriber = final_val.subscribe(subject_test);

Output

Now you can see only one Http call and the same data is shared between the subscribers called.

Behaviour Subject

Behaviour subject will give you the latest value when called.

You can create behaviour subject as shown below −

import { BehaviorSubject } from  rxjs ;
const subject = new BehaviorSubject("Testing Behaviour Subject"); 
// initiapzed the behaviour subject with value:Testing Behaviour Subject

Example

Here is a working example to use Behaviour Subject −

import { BehaviorSubject } from  rxjs ;
const behavior_subject = new BehaviorSubject("Testing Behaviour Subject"); 
// 0 is the initial value

behavior_subject.subscribe({
   next: (v) => console.log(`observerA: ${v}`)
});

behavior_subject.next("Hello");
behavior_subject.subscribe({
   next: (v) => console.log(`observerB: ${v}`)
});
behavior_subject.next("Last call to Behaviour Subject");

Output

Replay Subject

A replaysubject is similar to behaviour subject, wherein, it can buffer the values and replay the same to the new subscribers.

Example

Here is a working example of replay subject −

import { ReplaySubject } from  rxjs ;
const replay_subject = new ReplaySubject(2); 
// buffer 2 values but new subscribers

replay_subject.subscribe({
   next: (v) => console.log(`Testing Replay Subject A: ${v}`)
});

replay_subject.next(1);
replay_subject.next(2);
replay_subject.next(3);
replay_subject.subscribe({
   next: (v) => console.log(`Testing Replay Subject B: ${v}`)
});

replay_subject.next(5);

The buffer value used is 2 on the replay subject. So the last two values will be buffered and used for the new subscribers called.

Output

AsyncSubject

In the case of AsyncSubject the last value called is passed to the subscriber and it will be done only after complete() method is called.

Example

Here is a working example of the same −

import { AsyncSubject } from  rxjs ;

const async_subject = new AsyncSubject();

async_subject.subscribe({
   next: (v) => console.log(`Testing Async Subject A: ${v}`)
});

async_subject.next(1);
async_subject.next(2);
async_subject.complete();
async_subject.subscribe({
   next: (v) => console.log(`Testing Async Subject B: ${v}`)
});

Here, before complete is called the last value passed to the subject is 2 and the same it given to the subscribers.

Output

RxJS - Working with Scheduler

A scheduler controls the execution of when the subscription has to start and notified.

To make use of scheduler we need the following −

import { Observable, asyncScheduler } from  rxjs ;
import { observeOn } from  rxjs/operators ;

Here is a working example, wherein, we will use the scheduler that will decide the execution.

Example

import { Observable, asyncScheduler } from  rxjs ;
import { observeOn } from  rxjs/operators ;

var observable = new Observable(function subscribe(subscriber) {
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
}).pipe(
   observeOn(asyncScheduler)
);
console.log("Observable Created");
observable.subscribe(
   x => console.log(x),
   (e)=>console.log(e),
   ()=>console.log("Observable is complete")
);

console.log( Observable Subscribed );

Output

Without scheduler the output would have been as shown below −

Working with RxJS & Angular

In this chapter, we will see how to use RxJs with Angular. We will not get into the installation process for Angular here, to know about Angular Installation refer this pnk −https://www.tutorialspoint.com/angular7/angular7_environment_setup.htm

We will directly work on an example, where will use Ajax from RxJS to load data.

Example

app.component.ts

import { Component } from  @angular/core ;
import { environment } from  ./../environments/environment ;
import { ajax } from  rxjs/ajax ;
import { map } from  rxjs/operators 

@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =   ;
   data;
   constructor() {
      this.data = "";
      this.title = "Using RxJs with Angular";
      let a = this.getData();
   }
   getData() {
      const response =
      ajax( https://jsonplaceholder.typicode.com/users )
         .pipe(map(e => e.response));
      response.subscribe(res => {
         console.log(res);
         this.data = res;
      });
   }
}

app.component.html

<span>
   <h3>{{title}}</h3>
   <ul *ngFor="let i of data">
      <p>{{i.id}}: {{i.name}}</p>
   </ul>
</span>

<router-outlet></router-outlet>

We have used ajax from RxJS that will load data from this url − https://jsonplaceholder.typicode.com/users.

When you compile the display is as shown below −

Working with RxJS & ReactJS

In this chapter, we will see how to use RxJs with ReactJS. We will not get into the installation process for Reactjs here, to know about ReactJS Installation refer this pnk: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

Example

We will directly work on an example below, where will use Ajax from RxJS to load data.

index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { ajax } from  rxjs/ajax ;
import { map } from  rxjs/operators ;
class App extends Component {
   constructor() {
      super();
      this.state = { data: [] };
   }
   componentDidMount() {
      const response = ajax( https://jsonplaceholder.typicode.com/users ).pipe(map(e => e.response));
      response.subscribe(res => {
         this.setState({ data: res });
      });
   }
   render() {
      return (
         <span>
            <h3>Using RxJS with ReactJS</h3>
            <ul>
               {this.state.data.map(el => (
                  <p>
                     {el.id}: {el.name}
                  </p>
               ))}
            </ul>
         </span>
      );
   }
}
ReactDOM.render(<App />, document.getElementById("root"));

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8" />
      <title>ReactJS Demo</title>
   <head>
   <body>
      <span id = "root"></span>
   </body>
</html>

We have used ajax from RxJS that will load data from this Url − https://jsonplaceholder.typicode.com/users.

When you compile, the display is as shown below −