title: Chaining HttpClient calls in Angular 6
body: <p>I think I have read 100+ posts on the topic, and I still cannot figure out how to chain two HttpClient calls using rxjs in Angular 6.</p>
  
  <p>Let's say I have a service with that signature:</p>
  
  <pre><code>  GeoService {
        getState(): Observable&lt;string&gt; {
            return this.http.get&lt;string&gt;(stateURL);
        }
        getCities(state: string): Observable&lt;string[]&gt; {
            return this.http.get&lt;string[]&gt;(citiesURL + state);
        }
     }
  </code></pre>
  
  <p>I can't for the life of me figure out how to obtain both the state and the corresponding list of cities in my component:</p>
  
  <pre><code>import { Observable } from 'rxjs';
  import { map, flatMap, mergeMap, filter, switchMap } from 'rxjs/operators';
  
  ...
  
   ngOnInit() {
  
        this.svc.getState().
          pipe(map((state) =&gt; {
              this.state = state;
              return this.svc.getCities(state);
            }),
            mergeMap((cities) =&gt; this.cities = cities))
          ).
          subscribe(console.log('done'));
  </code></pre>
  
  <p>The code above in one of my 20 random attempts at combining pipe/map/mergeMap/subscribe in every way I could think of... a working example would be really really appreciated :)</p>
  
  <p>Thanks!</p>
  
  <p>Edit: None of the "possible duplicate" posts contain an actual example that works</p>