Angular 2: How to force run a function after all services are ready?

Question

export class InferencePageComponent implements OnInit {

  constructor(private campaignService: CampaignService) {
    this.campaignService.getStrategy1().subscribe(data => {
      this.Strategy1 = data;
    });
    this.campaignService.getStrategy2().subscribe(data => {
      this.Strategy2 = data;
  });
    this.campaignService.getStrategy3().subscribe(data => {
      this.Strategy3 = data;
    });
  }

I have data coming from 3 different functions of a service as above. I also have a function that takes data loaded from these 3 services and does some processing on that. But I am not able to load the function after all these 3 services have fully loaded. What should be the right approach?

Answer 1

You handle it by forkJoin ,forkJoin will return data when all calls are finished and return result

You handle all these calls inside a service using forkJoin and subscribe it inside the component, once you get the data you can call the other function.

Merging http observables using forkjoin

which would be the best way to solve it, also you can use observable.zip to do it on your component itself.

Answer 2

you can use Observable.zip() , Below is the code snippet that can help you.

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/zip';
// then in your component, do as below :
Observable.zip( 
 this.campaignService.getStrategy1(),
 this.campaignService.getStrategy2(),
 this.campaignService.getStrategy3()
 ).subscribe(([Strategy1Data,Strategy2Data, Strategy3Data])) => {
   this.Strategy1  = Strategy1Data;
   this.Strategy2 = Strategy2Data;
   this.Strategy3 = Strategy3Data;
   this.yourFunctionForExtraProcess();
 }