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

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);
      });