title: Angular2 Merging observables
body: <p>I'm having trouble getting with some observables. I can't seem to get two
  observables to place nice together. They work just fine on their own, but I
  need both values.</p>
  
  <pre class="lang-js prettyprint-override"><code>db.glass.subscribe( ( glass: GlassData[] ): void =&gt; {
    console.log( glass ); // This prints
  });
  
  db.cassette_designs.subscribe( ( cassettes: CassetteData[] ): void =&gt; {
    console.log( cassettes ): // This prints
  });
  </code></pre>
  
  <p>Not being all that familiar with observables, the first thing I tried was
  nesting one inside the other, but the inner one doesn't seem to do anything.</p>
  
  <pre class="lang-js prettyprint-override"><code>db.glass.subscribe( ( glass: GlassData[] ): void =&gt; {
    console.log( glass ); // This prints
  
    db.cassette_designs.subscribe( ( cassettes: CassetteData[] ): void =&gt; {
      console.log( cassettes ): // This doesn't
    });
  });
  </code></pre>
  
  <p>This seemed a bit silly to be so I searched on Google to see if there was a
  better way to combine observables and it turns out there are a few. I tried
  <code>zip</code> and <code>forkJoin</code> since they looked the most like what I wanted to do, but
  nothing would work with them either.</p>
  
  <pre class="lang-js prettyprint-override"><code>Observable.zip( db.cassette_designs, db.glass, ( cassettes: CassetteData[], glass: GlassData[] ): void =&gt; {
    console.log( cassettes ); // doesn't print
    console.log( glass     ); // doesn't print
  });
  
  Observable.forkJoin( [ db.cassette_designs, db.glass ] ).subscribe( ( data: any ): void =&gt; {
    console.log( data ); // doesn't print
  });
  </code></pre>
  
  <p>It could be something as simple as I'm not calling the functions correctly, but
  I'd have thought I would get some sort of warning or error at some point. <code>tsc</code>
  doesn't have any problem with the code and I get no messages in the developer
  consoles on either Chrome or Firefox.</p>
  
  <h1>Update</h1>
  
  <p>I've tried <code>combineLatest</code>, but it still doesn't display anything in the console. I must be missing something, but I'm not sure what. They work individually.</p>
  
  <pre class="lang-js prettyprint-override"><code>Observable.combineLatest( db.cassette_designs, db.glass, ( cassettes: CassetteData[], glass: GlassData[] ): void =&gt; {
    console.log( cassettes ); // doesn't print
    console.log( glass     ); // deson't print
  });
  </code></pre>
  
  <p>The observables are create in the following way:</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  
  public Listen( event: string ): Observable&lt;Response&gt;
  {
    return new Observable&lt;Response&gt;( ( subscriber: Subscriber&lt;Response&gt; ): Subscription =&gt; {
      const listen_func = ( res: Response ): void =&gt; subscriber.next( res );
  
      this._socket.on( event, listen_func );
  
      return new Subscription( (): void =&gt;
        this._socket.removeListener( event, listen_func ) );
    });
  }
  
  ...
  </code></pre>
  
  <p>Then to actually get the observables I send a listen for responses on the relevant event. e.g.</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  
  public cassette_designs: Observable&lt;CassetteData[]&gt;;
  
  ...
  
  this.cassette_designs = _socket.Listen( "get_cassette_designs" )
      .map( ( res: Response ) =&gt; res.data.data );
  </code></pre>