Reactive Datasource

This library provides an abstract ReactiveDataSource and MatDataSource classes to build custom datasources on Angular.

You can pass it to a Material Table:

<mat-datasource [dataSource]="source">
  <mat-table [dataSource]="source">
    ...
  </mat-table>
  <footer [attr.hidden]="source.total <= source.pageSize ? '' : null">
    <mat-paginator
      [length]="source.total"
      [pageSize]="source.pageSize"
    ></mat-paginator>
  </footer>
</mat-datasource>

Or consume it via the dataSource pipe:

<ng-container *ngIf="source | dataSource as items">
  <mat-nav-list>
    <mat-list-item *ngFor="let item of items">
      ...
    </mat-list-item>
  </mat-nav-list>
</ng-container>

Demo

An example of how it can work with a Firebase backend it's here:
https://stackblitz.com/edit/matdatasource

And the concepts behind are explained here:
https://medium.com/@matheo/reactive-datasource-for-angular-1d869b0155f6