Last updated Jun 7, 2021

What is MergeMap Operator - RXJS

In previous article we have seen RxJS concatMap Applying Observable concatenation to a series of HTTP operations seems like a good way to ensure that the HTTP oparation happen in the intended order.

What is MergeMap Operator - RXJS

In previous article we have seen RxJS concatMap Applying Observable concatenation to a series of HTTP operations seems like a good way to ensure that the HTTP oparation happen in the intended order.

However, in some situations, we want to run things in parallel, that is why we've got the Strategy merge Observable!

So Unlike concat, Merge will not wait until the Observable finishes until the next Observable is subscribed.

What is MergeMap Operator - RXJS

MergeMap is an flatting operator

Map + mergeAll = mergeMap

const source = from(["Tech", "Comedy", "News"]);

source.pipe(mergeMap((res) => this.getData(res))).subscribe((res) => {
      console.log(res);

    });

 getData(data) {
    return of(data + " Video Uploaded");
  }

Will output:

Tech Video Uploaded
merge-map.component.ts:36 Comedy Video Uploaded
merge-map.component.ts:36 News Video Uploaded

Tags

Available for projectsLet’s build together

Need this built properly,
not just explained?

I take on Angular and NestJS work directly — auth systems, multi-tenant SaaS, API rewrites and the deploy pipeline underneath them. You talk to the person writing the code.

Projects delivered
20+ Projects delivered
Angular • NestJS
7+ years Angular • NestJS
Average reply time
1 day Average reply time

What I can help with

  • Auth and permissions systems
  • Multi-tenant SaaS foundations
  • API design and rewrites
  • Deploy pipelines and VPS setup
  • Bug fixing and performance optimization
Send me a message

Tell me about your project and I’ll get back with a realistic scope and price.

Turn
Your Ideas
Into Reality

Stay in the loop

Get the finished tutorials, projects and resources in your inbox.

Join 5,000+ developers and get new tutorials, source code, product updates and exclusive content — straight to your inbox.

  • No spam
  • Useful content only
  • Unsubscribe anytime

Subscribe to TutsCoder

Be the first to get new tutorials, projects and tips.

Join 5,000+ developers already learning with us.

Learn
Build
Grow

Discussion

0 comments

Share your thoughts, ask questions or suggest improvements. Let’s learn and grow together!

No comments yet — be the first to start the discussion.

Join the discussion

Sign in to join the discussion. Your account also keeps your saved tutorials and path progress.