Rxjs Operators and Angular

RxJS is a library for composing asynchronous and event-based programs, one of the major features of Rxjs library is Rxjs operators. Rxjs Operators are widely used over various apps in order to maintain the scalability of code and reduce the code complexity.
Operators are of two kinds
1. Creation Operators
Creation Operators are more like a standalone functions which creates an Observable from arguments passed. 

2. Pipable Operators
Pipable Operators are those operators which are called upon an existing Observable. Pipable Operators returns a new Observable based on the existing Observable.

Both of the operators have their own pros and cons. Let’s take an instance like commonly Angular developers use services for HTTP calls and pass the data in form of an observable and that particular component subscribes that observable and executes further code  for success or error response. Some of the code is common over all the components like Closing of loader, showing toaster, logging error messages etc. All this need not be written over every component. Here, we will be discussing five major Rxjs Operators and how they can be used for reducing our code complexity

1. Of :
Of is one of the Creation Operators. Of operators is used to convert the passed argument into Observable and emit it’s value. The arguments can be numbers, strings or arrays.
Comma separated arguments are emitted one after another, whereas if we pass an array as an argument it will be emitted in a single call.
Example :  
of(5,10,15,20)
.subscribe( value => { console.log(‘Value => ’, val ); });
//output
// Value => 5

// Value => 10

// Value => 15

// Value => 20

2. SwitchMap :
It is one of the Transformation Operators. The main purpose of SwitchMap is to modify the values of Observable. It is a pipable operator. It doesn’t change the existing observable instead it returns a new observable after modifying data.
Example:  
const obs1 = of(5,10,15).pipe(switchMap((num) => of(num, num+num) ));

obs1.subscribe(val => console.log(‘Value => ’, val));

//Output

// Value => 5

// Value => 10

// Value => 10

// Value => 20

// Value => 15

// Value => 30

3. mapTo : 

   mapTo is one of the Transformation Operators. The main purpose of mapTo is to map the current value of an observation to and new value regarding the projection function which we have placed.
Example:
const touched = fromEvent(document, ‘click’)

const message = touched.pipe(mapTo(‘hey there’));

message.subscribe(val => { console.log(‘Value =>’, val) });

// Output
// Value => hey there 

4. Tap:
Tap is one of the utility Operators. It provides the mirrored Observable on which it has been called. We can also perform the modification upon the existing Observable. The main use of this operator is to prevent or handle any side effect based on existing Observable response.
For reference read : https://rxjs-dev.firebaseapp.com/api/operators/tap

5. debounceTime:
debounceTime is one of the Filtering Operators. It emits value after a certain interval of time. The time is passed as an argument to the operator and the time should be given in milliseconds. This is basically use in case of user input or to bind some timing function.
Example:
const timer = of(1,2,3).pipe(debounceTime(1000));

timer.subscribe(val => console.log(‘Value => ‘, val));

//Output (Prints every statement after 1 second )

// Value => 1 

// Value => 2

// Value => 3

Reference Link : https://rxjs-dev.firebaseapp.com/guide/operators