Javatpoint Logo
Javatpoint Logo

RxJS Operators

Operators are the important part of RxJS. RxJS provides a huge collection of operators. There are over a 100+ operators in RxJS that you can use with observables. An operator is a pure function that takes a observable as an input and provide the output in also in the form of an observable.

In simple words, we can say that operators are simply methods that can be used with Observables or Subjects of RxJS. RxJS operators facilitate us to change the original observable in some manner and return a new observable. The operators do not change the existing observable. They simply modify it and return a new one. Operators are known as the type of functions that do not modify the variables outside of its scope. There are mainly two types of RxJS operators:

Static Operators: The static operators are generally used to create observables. These types of operators can be found mainly under the creation operators.

Instance Operators: The instance operators are methods on observable instances. These are used to account the majority of RxJS operators that we have used.

How to work with Operator?

As we know that operators are pure functions which take in observable as the input and the provided output is also an observable.

We need a pipe() method to work with operators. Let's see an example of pipe() function.

Syntax of using pipe() Method

In the above syntax, we have created a observable using of() method. This method takes in values 1, 2 and 3. On this observable, you can perform many operations using different types of operators using pipe() method as the above syntax.

Let's see a working example of operators to understand the concept clearly. In this example, we are using a filter operator to filter the even numbers and then we will use a reduce() operator that will add all the even values and give the result.

Example 1:

After the execution of the program by using the node -r esm testrx.js command, we will see the following result.

Output:

RxJS Operators

You can see that 110 is the total of all the even values of the above numbers.

Example2:

Let's see another example of interval operator. This operator will create an Observable every time for the given time interval. In the following example, the program will return an observable after every 1000 millisecond.

Output:

RxJS Operators

Categorization of RxJS Operators

According to the official documentation for categories of RxJS operators, you can find the following categories of operators:

Creation Operators

Following is the list of operators that can be used as creation operators:

Index Operators Description
1. ajax The ajax operator is used to make an ajax request for the given URL.
2. from The from operator is used to create an observable from an array, an array-like object, a promise, an iterable object, or an observable-like object.
3. fromEvent The fromEvent operator is used to give output as an observable that is to be used on elements that emit an event for example buttons, clicks, etc.
4. fromEventPattern The fromEventPattern operator is used to create an observable from the input function that is used to register event handlers.
5. interval The interval operator is used to create an Observable for every time for the given time interval.
6. of The of operator is used to take in the arguments passed and convert them to observable.
7. range The range operator is used to create an Observable that gives you a sequence of numbers based on the range provided.
8. throwError The throwError operator is used to create an observable that notifies an error.
9. timer The timer operator is used to create an observable that emits the value after the timeout and the value will keep increasing after each call.
10. iif The iif operator is used to decide which Observable will be subscribed.

Mathematical Operators

Following is the list of operators that can be used as mathematical operators:

Index Operators Description
1. count The count operator is used to take an observable with values and convert it into an observable that gives a single value.
2. max The max method is used to take an observable with all values and return an observable with the maximum value from the list.
3. min The min method is used to take an observable with all values and return an observable with the minimum value from the list.
4. reduce In reduce operator, an accumulator function is used on the input observable. It returns the accumulated value in an observable form, with an optional seed value passed to the accumulator function.
So, the reduce function takes two arguments, one accumulator function, and second the seed value.

Join Operators

Following is the list of operators that can be used as join operators:

Index Operators Description
1. concat The concat operator is used to sequentially emit the Observable given as input and proceed to the next one.
2. forkJoin The forkJoin operator is used to take in an array or dict object as an input and wait for the observable to complete and return the last values emitted from the given observable.
3. merge The merge operator is used to take in the input observable and emit all the values from the observable and emit one single output observable.
4. race The race operator is used to return an observable that will be a mirror copy of the first source observable.

Transformation Operators

Following is the list of operators that can be used as transformation operators:

Index Operators Description
1. buffer The buffer operator is used to be operated on an observable and take in argument as an observable. It starts buffering the values emitted on its original observable array and emits when the observable taken as an argument, emits. Once the observable taken as arguments emits, the buffer is reset and starts buffering again on original till the input observable emits, and the same process repeats itself.
2. bufferCount The buffercount operator is used to collect the values from the observable on which it is called and emit the same when the buffer size is given to buffercount matches.
3. bufferTime The bufferTime operator is similar to bufferCount. It is used to collect the values from the observable on which it is called and emit the bufferTimeSpan. It takes in 1 argument, i.e., bufferTimeSpan.
4. bufferToggle The bufferToggle operator is used to take two arguments, openings and closingSelector. The opening arguments are subscribable or a promise to start the buffer. The second argument closingSelector is again subscribable or promises an indicator to close the buffer and emit the values collected.
5. bufferWhen The bufferWhen operator is used to give the values in the array form, it takes in one argument as a function that will decide when to close, emit and reset the buffer.
6. expand The expand operator is used to take in a function as an argument applied on the source observable recursively and on the output observable. The final value is observable.
7. groupBy Te groupBy operator is used to group the output according to specific conditions, and these group items are emitted as GroupedObservable.
8. map In the map operator's case, a project function is applied on each value on the source Observable, and the same output is emitted as an Observable.
9. mapTo In the mapTo operator, a constant value is given as output along with the Observable every time the source Observable emits a value.
10. mergeMap In the mergeMap operator, a project function is applied on each source value, and the output of it is merged with the output Observable.
11. switchMap The switchMap operator is used to apply a project function on each source value. The output of it is merged with the output Observable, and the value given is the most recent projected Observable.
12. window The window operator is used to take an argument windowboundaries which is an observable and give back a nested observable whenever the given windowboundaries emits.

Filtering Operators

Following is the list of operators that can be used as filtering operators:

Index Operators Description
1. debounce In the debounce operator, a value is emitted from the source Observable after a while, and the emission is determined by another input given as Observable or promise.
2. debounceTime The debounceTime operator is used to emit value from the source observable only after the time is complete.
3. distinct This operator is used to give all the values from the source observable that are distinct compared with the previous values.
4. elementAt This operator is used to give a single value from the source observable based upon the given index.
5. filter This operator is used to filter the values from source Observable based on the predicate function given.
6. first The first operator is used to give the first value emitted by the source Observable.
7. last The last operator is used to give the last value emitted by the source Observable.
8. ignoreElements The ignoreElements operator is used to ignore all the values from the source Observable and only execute calls to complete or error callback functions.
9. sample The sample operator is used to give the most recent value from the source Observable, and the output will depend upon the argument passed to it emits.
10. skip The skip operator is used to give back an observable that will skip the first occurrence of count items taken as input.
11. throttle The throttle operator is used to give output and ignore values from the source observable for the time determined by the input function taken as an argument, and the same process will be repeated.

Utility Operators

Following is the list of operators that can be used as utility operators:

Index Operators Description
1. tap The tap operator contains the output, same as the source observable, and it can be used to log the values to the user from the observable.
2. delay The delay operator is used to delay the values emitted from the source observable based on the timeout given.
3. delayWhen The delayWhen operator is used to delay the values emitted from the source observable based on the timeout from another observable taken as input.
4. observeOn The observeOn operator is based on the input scheduler. It is used to reemit the notifications from the source observable.
5. subscribeOn The subscribeOn operator helps to asynchronous subscribes to the source observable based on the scheduler taken as input.
6. timeInterval The timeInterval operator is used to return an object containing current value, and the time elapsed between the current and previous value calculated using the scheduler input.
7. timestamp The timestamp operator is used to return the timestamp along with the value emitted from the source observable. It tells about the time when the value was emitted.
8. timeout The timeout operator is used to throw an error if the source observable does not emit a value after the given timeout.
9. toArray The toArray operator is used to accumulate all the source values from the observable and provide their outputs as an array when the source completes.

Conditional Operators

Following is the list of operators that can be used as conditional operators:

Index Operators Description
1. defaultIfEmpty The defaultIfEmpty operator is used to return a default value if the source observable is empty.
2. every The every operator is used to return an observable based on the input function, which satisfies the condition on each of the values on source observable.
3. find The find operator is used to return the observable when the source observable's first value satisfies the condition for the predicate function taken as input.
4. findIndex The findIndex operator is based on the input schedule. It is used to reemit the notifications from the source observable.
5. isEmpty The isEmpty operator gives the output "True" if the input observable goes for complete callback without emitting any values and "False" if the input observable emits any values.

Multicasting Operators

Following is the list of operators that can be used as multicasting operators:

Index Operators Description
1. multicast A multicast operator shares the single subscription created with other subscribers. The params that multicast takes in is a subject or a factory method that returns a ConnectableObservable that has a connect method. The connect method is called to subscribe.
2. publish The publish operator is used to give back ConnectableObservable and use connect method to subscribe to the observables.
3. publishBehavior The publishBehaviour makes use of BehaviourSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created.
4. publishLast The publishBehaviour operator makes use of AsyncSubject, and returns ConnectableObservable. The connect method is used to subscribe to the observable created.
5. publishReplay The publishReplay operator uses behavior subject where it can buffer the values, replay the same to the new subscribers, and return ConnectableObservable. The connect method is used to subscribe to the observable created.
6. share The share operator is an alias for a multicast operator. The only difference is that you don't have to called the connect method manually to start the subscription.

Error Handling Operators

Following is the list of operators that can be used as error handling operators:

Index Operators Description
1. catchError The catchError operator is used to take care of catching errors on the source observable by returning a new observable or an error.
2. retry The retry operator is used to take care of retrying back on the source observable if there is an error. The retry is done according to the given input count.

Next TopicRxJS Observables




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA