Angular switchMap example with multiple requests

As per the Wikipedia, Angular is

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS{alertInfo}

In this article, I will show you how to use the switchMap operator in angular, which is  the most used operator from the RxJs library.

You will be familiar with the following items by the end of this post.

• What exactly is RxJs?
• What are RxJs operators and how do they work in an Angular application?
• What is the switchMap operator and how does it work in an Angular application with a live example?
• How to handle multiple request using switchMap.

switchMap operator

SwitchMap is a flattening operator with two observables, one outer and one inner. switchMap emits values only from the most recently projected Observable.

Let’s understand this operator with a real-world example. Assume you want to load a post from the web server, and once the post is loaded, you want to download all the related comments. See the below animations of how switchMap works.

I am using stackbliz ide for this demo

Let’s create a service that load post and comments

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';

@Injectable()
export class PostService {
  apiURL: string = 'https://jsonplaceholder.typicode.com/posts/1';
  constructor(private httpClient: HttpClient) {}

  getSinglePost() {
    return this.httpClient.get(`${this.apiURL}`);
  }
  getAllComments(postId: number) {
    return this.httpClient.get(`${this.apiURL}/comments`);
  }
}$ads={1}

Open the app.component.ts and add the following code.

import { Component, OnInit } from '@angular/core';
import { switchMap } from 'rxjs/operators';
import 'rxjs/add/observable/from';
import { PostService } from './postservice.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  items;
  constructor(private postService: PostService) {}
  ngOnInit() {}
  ngAfterViewInit() {
    // Load Single Post
    this.postService
      .getSinglePost()
      .pipe(
        // Switch to load comments
        switchMap((res1: any) => this.postService.getAllComments(res1.id))
      )
      .subscribe(result => {
        // Finally get the result and show to page
        this.items = result;
        console.log(result);
      });
  }
}

The code is straightforward; the only thing that needs to understand is the below code. As you can see, I am using switchMap operator for loading the comments.

.getSinglePost()
      .pipe(
        // Switch to load comments
        switchMap((res1: any) => this.postService.getAllComments(res1.id))
      )
      .subscribe(result => {
        // Finally get the result and show to page
        this.items = result;
        console.log(result);
      });