The Angular Masterclass/

...

/

Transformation Operators

Transformation Operators

Let's explore RxJS transformation operators with the help of interactive examples.

We'll cover the following...

What are the transformation operators?

These operators help in transforming the source of an Observable.

mergeMap() operator

The mergeMap() operator allows us to take two source Observables and convert them into one source Observable. Why would this be useful? Well, if we have an application that retrieves data from two separate APIs, we can take the two API Observables and merge them into one single data source.

Example

Let’s have a look at how this works:

Press + to interact
const { of } = require("rxjs");
const { mergeMap } = require("rxjs/operators");
// First source Observable
// of is a creational operator that creates Observable from a sequence of data.
const bookTitle = of("Getting Started With Angular");
// Merge two source Observables
const completeTitleObservable = bookTitle.pipe(
  mergeMap((value) => `${value} 10!`)
);
// Output: Create Getting Started With Angular 10!
const subscribe = completeTitleObservable.subscribe((value) =>
  console.log(value)
);

Here, we’re creating an Observable that returns the Getting Started With Angular title, and then we’re using the ...