How To Use ForkJoin — Angular Example

`How To Use ForkJoin — Angular Example`

forkJoin is a useful operator in Angular’s RxJS library for combining the results of multiple observables into a single observable. It waits for all the source observables to complete and then emits an array of the last values emitted by each source observable.

Here’s a real-world example of how forkJoin can be used in an Angular app:

Let’s say we have an application that displays posts information, including the comments for a given post. We want to fetch this information from separate API endpoints and display it on a single page.

First, let’s define the interfaces for our post and comment data:

export interface Post {
  id: number;
  title: string;
  body: string;
}

export interface Comment {
  id: number;
  postId: number;
  name: string;
  email: string;
  body: string;
}

Next, we can create a service called PostService that handles the API calls and returns observables for the post and comment data:

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

@Injectable()
export class PostService {
  private apiUrl = 'https://jsonplaceholder.typicode.com';

  constructor(private http: HttpClient) {}

  getPost(postId: number): Observable<Post> {
    const url = `${this.apiUrl}/posts/${postId}`;
    return this.http.get<Post>(url);
  }

  getComments(postId: number): Observable<Comment[]> {
    const url = `${this.apiUrl}/comments?postId=${postId}`;
    return this.http.get<Comment[]>(url);
  }
}

Now, in a component, let’s say PostDetailsComponent, we can use forkJoin to combine the post and comment observables:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { forkJoin } from 'rxjs';
import { PostService } from './post.service';
import { Post, Comment } from './post.model';

@Component({
  selector: 'app-post-details',
  templateUrl: './post-details.component.html',
  styleUrls: ['./post-details.component.css']
})
export class PostDetailsComponent implements OnInit {
  post: Post;
  comments: Comment[];

  constructor(
    private route: ActivatedRoute,
    private postService: PostService
  ) {}

  ngOnInit() {
    const postId = +this.route.snapshot.paramMap.get('id');

    forkJoin([
      this.postService.getPost(postId),
      this.postService.getComments(postId)
    ]).subscribe(([post, comments]) => {
      this.post = post;
      this.comments = comments;
    });
  }
}

In the example above:

The PostDetailsComponent obtains the post ID from the route parameters using the ActivatedRoute service.
Inside the ngOnInit method, we use forkJoin to combine the observables returned by getPost and getComments.
The combined observable emits an array containing the post and comment data once both API calls complete.
We subscribe to the combined observable and assign the received data to the component properties (post and comments).

Finally, in the component’s template (post-details.component.html), you can display the post and comment information:

<div *ngIf="post">
  <h1>{{ post.title }}</h1>
  <p>{{ post.body }}</p>
</div>

<div *ngIf="comments">
  <h2>Comments</h2>
  <ul>
    <li *ngFor="let comment of comments">
      <h3>{{ comment.name }}</h3>
      <p>{{ comment.body }}</p>
    </li>
  </ul>
</div>

Make sure to import the necessary modules and provide the PostService in your app’s module or component.

In this diagram:

The PostService (A) provides methods to fetch post and comment data from the API.
The getPost() method fetches a single post (B) by ID.
The forkJoin operator (D) combines the observables returned by getPost() and getComments().
The combined observable emits an array of the post and comment data.
The subscribe() method receives the emitted data (E) and assigns it to the Post and Comments variables in the PostDetailsComponent.

How To Use ForkJoin — Angular Example