A Complete Guide on Angular RxJS Library

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']
})
exportclassAppComponent{
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;
});
}
}

import { fromEvent, interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';
const obs$1 = fromEvent(document, 'click');
const obs$2 = interval(1000);
const finalObs$ = obs$1.pipe(
  switchMap(event => obs$2)
);
const subscription = finalObs$.subscribe((value) => console.log(value));

import { mergeMap, map  } from 'rxjs/operators';
const firstNameObs$ = of('kinnari');
const lastNameObs$ = of('parmar');
const finalObs$ = firstNameObs$.pipe(
  mergeMap(event1 => lastNameObs$.pipe(map(event2 => event1+' '+event2)))
);
const subscription = finalObs$.subscribe((value) => console.log(value)

import { interval } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
const obs$ = interval(1000).pipe(
    throttleTime(3000));
obs$.subscribe(console.log)

import { from } from 'rxjs'; 
import { pluck } from 'rxjs/operators';
const data = [{id:1, value:'one'}, {id:2, value:'two'}, {id:3, value:'three'}];
const obsPluck$ = from(data).pipe(
  pluck('value')
).subscribe(x =>console.log(x));
const obsMap$ = from(data).pipe(
  map(data => data.value)
).subscribe(x => console.log(x));

A Complete Guide on Angular RxJS Library Table of Content 1. What is Reactive Programming? 2.What is RxJS? 3.What is Observable? 4. Advantages of using RxJS 5. Disadvantages of using RxJS 6. Installation and Configuration Setup 7. RxJS Package Installation 8. Working with RxJS & Angular 9. RxJS: Most commonly used operators 9.1.SWITCH MAP 9.2. MERGE MAP 9.3. THROTTLE TIME/a> 9.4.MAP & PLUCK 10.Conclusion What is Reactive Programming? RxJS stands for Reactive Extension for JavaScript. It is basically a library for Reactive programming that utilizes Observables and makes it easier to mold adjusting Asynchronous or Callback-based code. To understand it in simple words, we are relying on events rather than writing software in a typical way to handle changes. What is RxJS? RxJS is a library to compose asynchronous and Event-based Programs by using Observable. It Provides basic functionality, the Observable,Satellite types (Observer, Schedulers, Subjects) and Operators inspired by Array#extras to allow handling asynchronous event as collections. What is Observable? RxJS to present Observables, a new Push System for JavaScript. An Observables is a creator of multiple values, “Pressure” them to Observers (Consumers). Advantages of using RxJS Below are the advantages of RxJS – RxJS is more flexible to use. A useful and helpful library. RxJS make your code easily understandable. RxJS Is not dependent on the Third-party. Extensible and provide high-quality API. Disadvantages of using RxJS The disadvantages of RxJS are – Most required Observables. RxJS provide some wrong usage of functionality, like strict typing issues. In which Testing and Debugging, Configuration is Very Difficult. Installation and Configuration Setup We have to first install these following NodeJS, Npm, RxJS Package Installation To work with RxJS, we need the following setup: NodeJS Npm RxJS package installation It is very easy to install and spread RxJS using Npm. You need to have NodeJS and Npm installed on your computer system. To verify if NodeJS and Npm are Pre-installed on your system, try to execute the following command in your command prompt. Image-Reference: Check Installed version In case you are getting the already install version, it means NodeJS and Npm are installed on your computer system. If it does not Show anything in your Command Prompt, install NodeJS on your system. The download page of NodeJS will look like the following: Image source Based on your Operating system, install the necessary package. To check if Npm is installed or not, type npm –v in the command prompt. It should Print the version of the Npm. Read More: Implementation Of Ngx Infinite Scroller Using Angular Application RxJS Package Installation To start with RxJS installation, first, create a folder name rxjsproj/ where we will practice all RxJS examples. the folder rxjsproj/ is generated, run command npm init, for project setup as shown below: Image-Refrence: Create Folder and Call init Npm init command will ask few questions during the execution, just press enter in keyboard and proceed. Once the execution of npm init is done, it will create a package. JSON inside rxjsproj/ as shown below and here give the Name of the Package name. Now you can install RxJS using the below command: Image-Reference: RxJS Package installation We are done with the RxJS installation.,/P> Alternately, you can also import RxJS from a CDN by including it in your HTML document: Working with RxJS & Angular Let’s see how to use RxJS with Angular. We will not get into the installation process for Angular, first of all, you have to installed the Angular in your Project. We will directly see the 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'] }) exportclassAppComponent{ 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   {{title}} {{i.id}}: {{i.name}} When you compile the display is as shown below: Image Source RxJS: Most commonly used operators RxJS provide different types of operators some important operators are defined here. SWITCH MAP The switch Map operator maps each value to an observable, then it patterns all of the internal observables. Example of Switch map import { fromEvent, interval } from 'rxjs'; import { switchMap } from 'rxjs/operators'; const obs$1 = fromEvent(document, 'click'); const obs$2 = interval(1000); const finalObs$ = obs$1.pipe( switchMap(event => obs$2) ); const subscription = finalObs$.subscribe((value) => console.log(value)); When subscribed, obs$1 will emissions a response for every user clicks on the page and obs$2 will increment emission numbers for every 1 sec. Looking for Reliable Angular Development Company? Enquire Today. See here   MERGE MAP Merge Map by default is a combination of merge All and map. Merge All takes care of subscribing to the 'internal' Observable so that we no longer have to Subscribe two times as merge All merges the value of the 'internal' Observable into the 'outer' Observable. Example of Merge map import { mergeMap, map } from 'rxjs/operators'; const firstNameObs$ = of('kinnari'); const lastNameObs$ = of('parmar'); const finalObs$ = firstNameObs$.pipe( mergeMap(event1 => lastNameObs$.pipe(map(event2 => event1+' '+event2))) ); const subscription = finalObs$.subscribe((value) => console.log(value) THROTTLE TIME This operator is used to emission the latest value when a specified throttle time duration has passed. Example of Throttle time import { interval } from 'rxjs'; import { throttleTime } from 'rxjs/operators'; const obs$ = interval(1000).pipe( throttleTime(3000)); obs$.subscribe(console.log) In which the Output is Shown as 0,4,8,12….   MAP & PLUCK Map and Pluck are the most used and very useful operators in the RxJS. Map operator in RxJS works same as JS map. Pluck is used when we just need to passed a single field value to the subscription otherwise sending the entered JSON object. Example of Map & Pluck import { from } from 'rxjs'; import { pluck } from 'rxjs/operators'; const data = [{id:1, value:'one'}, {id:2, value:'two'}, {id:3, value:'three'}]; const obsPluck$ = from(data).pipe( pluck('value') ).subscribe(x =>console.log(x)); const obsMap$ = from(data).pipe( map(data => data.value) ).subscribe(x => console.log(x)); Here Output Shown as one two three …. Conclusion Angular has a lot more features. RxJS is one of the best of them. The Applications is in next level in terms of maintainability and clarity. RxJS is more Accurate, but once you’re familiar with its functionality and operators, it Provides many benefits, all of this is to say, the code is easier to understand compared to imperative code. RxJS requires a different mode of thinking, but it is very helpful to learn and easy to use.

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.