Operators

Allow complex asynchronous code to be easily composed in a declarative manner (functional programming).

RxJS provides natively more than a hundred operators.

An operator allows to define an Observable from another one by applying some transformations.

Example

import { of } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0), // odd values only
    map(n => n * n) //Square odd values
  );

// Subscribe to get values
squareOdd.subscribe(x => console.log(x));

Pipeable Operators are the kind that can be piped to Observables. When called, they do not change the existing Observable instance. Instead, they return a new Observable, whose subscription logic is based on the first Observable.

A Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.

A Pipeable Operator is essentially a pure function which takes one Observable as input and generates another Observable as output. Subscribing to the output Observable will also subscribe to the input Observable.

Creation Operators can be called as standalone functions to create a new Observable. For example: of(1, 2, 3) creates an observable that will emit 1, 2, and 3, one right after another.

Observables most commonly emit ordinary values like strings and numbers, but sometimes it is necessary to handle Observables of Observables. For example, imagine you had an Observable emitting strings that were the URLs of files you wanted to see. The code might look like this:

const fileObservable = urlObservable.pipe(map((url) => http.get(url)));

http.get() returns an Observable (of string or string arrays probably) for each individual URL. Now you have an Observable of Observables, a higher-order Observable.

But how do you work with a higher-order Observable? Typically, by flattening. For example:

const fileObservable = urlObservable.pipe(
  map((url) => http.get(url)),
  concatAll()
);

The concatAll() operator subscribes to each “inner” Observable that comes out of the “outer” Observable, and copies all the emitted values until that Observable completes, and goes on to the next one. All of the values are in that way concatenated. Other useful flattening operators can be used.

List of the most commonly used operators

1. Of
2. From
3. FromEvent

1. CombineLatest
2. Concat

1. Map
2. SwitchMap

1. Debounce
2. DebounceTime
3. Distinct
4. DistinctUntilChanged
5. DistinctUntilKeyChanged
6. Filter
7. First
8. TakeLast
9. TakeUntil
10. TakeWhile

1. CombineLatestAll
2. CombineLatestWith
3. ConcatWith

1. Delay
2. Tap

find your operator https://rxjs-dev.firebaseapp.com/operator-decision-tree