title: Return data from chained observables in resolver, wait until all data is fetched
body: <p>I have an Angular resolver to provide data for a component.
  I am using ngrx. I want to check if 2 pieces of data (a car and its maker) are in the store, if they are not, dispatch an action to get the data from 2 separate APIs. I first get the car based on a url param, once I have the car I need to get the maker sending the car ID to the API.
  Once both requests are done and I have both the car and its maker, I want to combine the data (add the maker as a property of the car) and return the car object in the resolver. </p>
  
  <pre><code>export class CardResolverService implements Resolve &lt;Observable&lt;any&gt;&gt; {
  
      private cardId: string;
      private cardLoaded$ = new Subject();
      private makerLoaded$ = new Subject();
      private car: Car;
  
      constructor(private store: Store&lt;any&gt;) {
  
      }
  
      // Check if car is in store, otherwise dispatch action to call API
      // Once the car is loaded, get its maker based on one of its properties
      private initCar(): void {
          this.store.select(CarSelectors.getCardById(this.cardId)).pipe(
              takeUntil(this.cardLoaded$)
          ).subscribe((car) =&gt; {
              if (!car) {
                  this.store.dispatch(new CarSelectors.LoadCarByIdAction(this.cardId));
              } else {
                  this.cardLoaded$.next(true);
                  this.car = car;
                  this.getCarMaker(car.makerId);
              }
          });
      }
  
      private getCarMaker(makerId: string) {
          this.store.select(MakerSelectors.getMakerById(makerId)).pipe(
              takeUntil(this.makerLoaded$)
          ).subscribe((maker) =&gt; {
              if (!maker) {
                  this.store.dispatch(new MakerActions.LoadMakerByIdAction(makerId));
              } else {
                  this.car.maker = maker;
                  this.makerLoaded$.next(true);
              }
  
          });
      }
  
      // I need to wait until both car and maker are loaded to return the car object
      private waitForData(): Observable&lt;TeamMemberView&gt; {
          return this.carLoaded$.pipe(
                  withLatestFrom(this.makerLoaded$),
                  map(() =&gt; this.car)
          );
  
      }
  
      resolve(route: ActivatedRouteSnapshot): Observable&lt;any&gt; {
          // Get car ID from url
          this.carId = route.params['carId'];
          this.initCar();
          return this.waitForData(); // Here is where I need help
      }
  }
  </code></pre>
  
  <p>In the waitForData method I am trying to check if both observables to get the car and the maker have returned a value, via subjects, and if they have, return the car object. But the waitForData method is not returning anything.</p>