19 CEO Dashboard Examples for Business Leaders
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Kapil Panchal - June 22, 2021
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
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.
Below are the advantages of RxJS –
The disadvantages of RxJS are –
We have to first install these following NodeJS, Npm, RxJS Package Installation To work with RxJS, we need the following setup:
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.
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.
We are done with the RxJS installation.,/P>
Alternately, you can also import RxJS from a CDN by including it in your HTML document:
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.tsimport{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
When you compile the display is as shown below:
RxJS provide different types of operators some important operators are defined here.
The switch Map operator maps each value to an observable, then it patterns all of the internal observables.
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 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.
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)
This operator is used to emission the latest value when a specified throttle time duration has passed.
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 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.
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 ….
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.
Build Your Agile Team
Let's rewind to the 1990s. Data used to be stored on servers and CEOs relied on basic tools to make optimal decisions. No dashboards, nothing. When you use Power BI with a solid...
Imagine walking into a meeting where critical decisions need to be made—fast. You need clear, flexible data that you can analyze on the spot. But what if your insights are locked inside...
Clear insights mean smarter decisions, and this is what data storytelling does. It helps you speak a language that you quickly understand. Like for example, you are a CTO dealing with...