Search⌘ K
AI Features
Home
Courses
The Angular Masterclass

Transformation Operators

Explore the use of transformation operators mergeMap and switchMap in Angular Observables with RxJS. Understand how to combine or switch data streams from multiple sources to create responsive applications. Learn when and how to apply these operators effectively for managing complex data pipelines.

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:

Javascript
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 pipe() ...