Below you can see my code that I have simplified for readability and clarity:

```
connect(): Observable<Customer[]> {
   const displayDataChanges = [
     this._customerDatabase.dataChange,
     this._filterChange,
     this._sort.mdSortChange,
     this._paginator.page
   ];
   return Observable.merge(...displayDataChanges).map(() => {
     let data = this._customerDatabase.data.slice();
     data = this.getFilteredData(data);
     data = this.getSortedData(data);
     const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
     return data.splice(startIndex, this._paginator.pageSize);
   });
}

```

This method will return an Observable array of Customers.

The part below defines an array of Observables:

```
const displayDataChanges = [
      this._customerDatabase.dataChange,
      this._filterChange,
      this._sort.mdSortChange,
      this._paginator.page
];

```

Every time one of these emit data I expect my Array of Customers to change. (when i load the data, when my filter has changed, when i choose another sort mechanism and when i change the page)

I then Merge all of these together so that i can 'assemble' my data that has to be returned. As you can see, it is not very performant because it doesn't distinguish between what actual observable has emitted data...

**How do I accomplish this and determine which observable has been changed?**
*(Pseudo code below)*

```
return Observable.merge(...displayDataChanges).map(() => {

 **[ALWAYS]**
 let data = this._customerDatabase.data.slice();

 **[IF MY SORTING HAS CHANGED]**
 data = this.getSortedData(data); /* After which i will change the dataSet */
 **[IF MY FILTER HAS CHANGED]**
 data = this.getFilteredData(data);

 **[ALWAYS]**
 const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
 return data.splice(startIndex, this._paginator.pageSize);
});

```