how to execute function that dependent on 2 observables

Question

I'm having a function that needs to get 2 responses from 2 separate async functions (return observables). 1. Func1 return observable 2. Func2 return observable They are not dependent one on another - they can run separately. Func 3 should have some how the result of both Func1 and Func2 to execute. I'm workign with RXJS, and tried doing it using pipe and flatMap or map, but still - didn't managed.

... or eventually merge, combineLatest, zip depending on what you want to do. — martin
I would recommand looking at this link reactive.how/combinelatest — Morphyish

SiddAjmera SiddAjmera · Accepted Answer · 2019-07-31T13:02:24

You need forkJoin for this. Here give this a try:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private http: HttpClient) {}

  getGoogle() {
    return this.http.get('https://api.github.com/users/google');
  }

  getMicrosoft() {
    return this.http.get('https://api.github.com/users/microsoft');
  }

  ngOnInit() {
    forkJoin(
      this.getGoogle(),
      this.getMicrosoft()
    )
    .subscribe(
      res => console.log(res)
    )
  }

}

Here's a Working Sample StackBlitz for your ref.

how to execute function that dependent on 2 observables

1 Answers