title: Best way to chain observable subscriptions in Angular?
body: <p>I have always nested subscriptions when I need to call a resource after getting the result of another one, like so:</p>
  
  <pre><code>this.paymentService.getPayment(this.currentUser.uid, this.code)
      .valueChanges()
      .subscribe(payment =&gt; {
          this.payment = payment;
          this.gymService.getGym(this.payment.gym)
              .valueChanges()
              .subscribe(gym =&gt; {
                  this.gym = gym;
              });
      });
  </code></pre>
  
  <p>I am using Angular v6 and AngularFire2.</p>
  
  <p>Both endpoints (getPayment and getGym) return objects. Is there any more elegant way to do this without nesting one call inside another?</p>