Is there a built in way to determine when all observables have been resolved?

Question

I have a component with a handful of external API calls. I'm subscribing to all of these all API calls, then populating drop-downs once the calls have succeeded. My issue is that when I load an already created entity. Some of the drop-downs might not be populated since the form is waiting for the promise to be fulfilled.

I realize I can add a variable or something along those long in the success block of my promises, then only populate the loaded entity onto the UI once all variables are true.

Is there something like this built into Angular 2 already? I can't seem to find any examples online of this particular problem.

Answer 1

You could leverage the forJoin operator of observables. It allows you to wait for all observables to have executed their requests before calling the global callback.

The received data in it corresponds to an array of all data.

Here is a sample:

Observable.forkJoin([
  this.service.getEntityData(),
  this.service.getDropdown1Values(),
  this.service.getDropdown2Values(),
]).subscribe((data) => {
  this.entityData = data[0];
  this.dropdown1Values = data[1];
  this.dropdown2Values = data[2];
});