text: 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
  - 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.
  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:
  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.
  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:
  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:
  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('') .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:
  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.
  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.