title: Angular subscribe to two Observables in one, and return the results of both
body: <p>I'm trying to combine two Observables and emit an event based on the result of one or both.</p>
  
  <h2>Oversimplified code:</h2>
  
  <pre><code>export class MyDirective {
    // Filter properties
    filter = new ReplaySubject&lt;any&gt;();
  }
  
  export class MyComponent implements AfterContentInit {
    // First observable (my own creation)
    @ContentChildren(MyDirective) columns: MyDirective[];
    filterChange = Observable.merge(...this.columns.map(c =&gt; c.filter));
  
    // Second observable (EventEmitter from a component library)
    @ViewChild(MdSort) sort: MdSort;
  
    ngAfterContentInit() {
      // Now merge them and call a function with the results from both
      Observable.xxx([ this.sort.sortChange, this.filterChange ]).subscribe(res =&gt; {
        this.readData(res.sort, res.filter);
      });
    }
  
    readData(sort?: any, filter?: any) {
      // This method should receive the results from the observables
    }
  }
  </code></pre>
  
  <h2>Solution attempts:</h2>
  
  <p>I've tried different things to merge these:</p>
  
  <p><strong>Observable.merge</strong></p>
  
  <pre><code>Observable.merge(this.sort.sortChange, this.filterChange).subscribe(res =&gt; {
    // Gives me no clue as to which of the observables has been fired
    // and thus I cannot process properties 
  });
  </code></pre>
  
  <p><strong>Observable.zip</strong></p>
  
  <pre><code>Observable.zip(this.sort.sortChange, this.filterChange, (sort, filter) =&gt; {
    // I never reach this spot. Why?
    this.readData(sort, filter);
  });
  </code></pre>
  
  <p><strong>Subscribing to both</strong></p>
  
  <p>This works, but I'm not happy with this. I would like this to be done using Observable merging somehow...</p>
  
  <pre><code>// On any changes, read data
  let sort; let filter;
  this.sort.sortChange.subscribe(s =&gt; sort = s);
  this.filterChange.subscribe(f =&gt; filter = f);
  this.Observable.merge(this.sortChange, this.filterChange).subscribe(result =&gt; {
    // Fired whenever any of the two are changed
    this.readData(sort, filter);
  });
  </code></pre>