googleads
4 Must known Operators In RxJS | Hire Web Developer
preloder
ReactJS Technical Web Development

4 Must Known Operators In RxJS

 

Rxjs Operators : –

RxJS is the utmost helpful for those operators, even if it is observable concept also. Operators are the eminent pieces that allow critical asynchronous code to simply collect in an understandable manner.

Now, We can see some of the most useful operators in daily usage projects like map, filter, mergeMap, switchMap

Importing the Operators into application

If you are using the RxJS version 5.4.x then you can use prototype-based importions

 

If you are using RxJS version 5.5.x then you can go for ES6 import style of exported function like below,

 

Note:- Here, operatorName are rxjs operators like filter, map, mergeMap and etc.

Usage and Importance

 

Filter:-

Like Array.prototype.filter(). It will emit the values only based on the predicate conditions which means it will get the values from the source observable and will emit the values when the passed condition is true. 

 

Import:

 

Example:-

 

Output:

 

 

Note: ‘from’ is also rxjs keyword. It will transfer an array, iterable or promise into an observable

You can check the output here:

Stackblitz url: https://stackblitz.com/edit/angular-filter-in-rxjs?file=src/app/hello.component.ts

Map:-

We are well known about Array.prototype.map() function and this function is similar like this. This operator applies projection to each value from input data and emits that as output observable. And also, it’s plucking particular data values into an array.

Import:

 

Example:-

 

 

Output

 

Output

 

Output Link : https://stackblitz.com/edit/angular-rxjs-map?file=src%2Fapp%2Fhello.component.ts

SwtichMap :-

It will map each value to an observable, then it will flattens all of these inner observables using ‘switch’.

Import:-

 

Example:

// ‘of’ is oberservableof rxjs, it will emitting the values in sequence.

 

Stackblitz url: https://stackblitz.com/edit/angular-rxjs-switchmap?file=src%2Fapp%2Fhello.component.ts

Returns the output observable that emitted based on the function you apply on each item emitted by source observable. Whenever it calls the new inner subscription then it will cancel the previous inner subscriptions and it will emit the recent subscription. If you want only one inner subscription to get active at a time then go for ‘switchMap’ otherwise  go for ‘mergeMap’ if you want multiple inner subscriptions at a time. 

MergeMap: –

It is also known as flatMap. It maps each value to an observable, then it will flattens all of these inner subscriptions using ‘mergeall’

Import:-

 

Example:

 

Stackblitz Link: https://stackblitz.com/edit/angular-rxjs-mergemap?file=src/app/hello.component.ts

Returns the output observable that emitting based on the given function that you apply each item emitted by source observable. It will handle multiple inner subscriptions at a time. So, Some times it will create memory leak problem because of long time active subscriptions. To avoid this conflictions, better you can go to ‘concatMap’. concatMap won’t go to next subscription untill previous subscription completes so there would be less possibility for memory leaks.

If you like to read more blogs about web development or recent technologies like Blockchain, IOT & upcoming trends then keep your eye on our largest blog repository which could help you with more technical blogs.

For any queries reach us via info@agiratech.com 

The following two tabs change content below.

Nagarani Gorantla

Software Engineer having 2 years of experience in Web Development, hands on expertise in Ruby, Ruby On Rails, Angular and CMS. An Active ally of Social services and Blood camps.

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 id="120788" title="Web Page Form"]

Schedule Your Call