Angular 5 + Angular Material Loading a Data Table

As promised, an example: https://stackblitz.com/edit/angular-enbzms?file=app%2Fsome.service.ts

So what's happening there: In the service, have a method which returns a BehaviorSubject of the details object you needed for making those HTTP calls. Pipe it through SwitchMap, in which you spread and map all the member objects into separate HTTP.get calls (simulated with a timer here). Zip will wait until all the HTTP observables have finished, then return you the result array always in the same order as the original array.

Then you just need to return service.getObservableForDataSource() in the connect -method of your DataSource. MatTable will subscribe on creation and unsubscribe on destruction.

If you look at the console while at stackblitz, you can see that if you click emit details and shortly after click hide table (which perfectly emulates leaving the page), the console logging stops right there, as the entire Observable chain 'dies' when MatTable unsubscribes from it.

In this case, a simple async pipe is there simulating a MatTable, but it works the same way.

To adhere to SO rules, I'll copy the code behind the Stackblitz link here also, but I recommend just following the link to Stackblitz :)

some.service.ts

import { Injectable } from '@angular/core';
import { timer } from 'rxjs/observable/timer';
import { zip } from 'rxjs/observable/zip';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { map, switchMap, filter, tap } from 'rxjs/operators';
@Injectable()
export class SomeService {
  constructor() { }
  details$: BehaviorSubject<any> = new BehaviorSubject(null);
  loading$: BehaviorSubject<boolean> = new BehaviorSubject(false);
  getPatientDemographics(id): Observable<any> {
    // Emulate an API call which takes a random amount of time
    return timer(100 + Math.random() * 1500).pipe(
      map((n: number) => {
        return {
          id,
          created: new Date().getTime()
        };
      })
    );
  }
  setDetails(details: any) {
    this.details$.next(details);
  }
  getObservableForDataSource() {
    // In your DataSource.connect(): return service.getObservableForDataSource()
    return this.details$.pipe(
      tap(() => this.loading$.next(true)),
      tap(data => console.log('Details in the pipe', data)),
      map(details => details.getMembersObj()),
      filter(membersObj => !!membersObj), // Leave out possible nulls
      map(membersObj => membersObj.member), // Pass on just the array of members
      switchMap(this.getPatients.bind(this)), // Switch the observable to what getPatients returns
      tap(data => console.log('End of pipe', data)),
      tap(() => this.loading$.next(false)),
    );
  }
  getPatients(members: any[]) {
    return zip(
      ...members.map(member => this.getPatientDemographics(member.id).pipe(
        tap(data => console.log('Received patient demog.', data)),
        // The end result will be in the same order as the members array, thanks to 'zip'
      ))
    );
  }
}

app.component.ts

import { Component } from '@angular/core';
import { SomeService } from './some.service';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tableVisible = true;
  dataSourceObservable: Observable<any>;
  constructor(public service: SomeService) { }
  start() {
    const mockDetails = {
      getMembersObj: () => {
        return {
          member: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]
        }
      }
    };
    // In your table datasource class's connect(), you would simply
    // return service.getObservableForDataSource() 
    this.dataSourceObservable = this.service.getObservableForDataSource();
    this.service.setDetails(mockDetails);
  }
}

app.component.html

<h2>Fake Table</h2>
<p>
    <button (click)="start()">Emit the details</button>
</p>
<p>
    <button (click)="tableVisible=!tableVisible">{{tableVisible?'Hide table: emulate navigating away from this route' : 'Show table'}}</button>
</p>
<div *ngIf="tableVisible">
    <div *ngIf="dataSourceObservable | async as data">
        <pre>{{data|json}}</pre>
    </div>
    <i *ngIf="service.loading$|async">Loading...</i>
</div>