@matheo/datasource

Reactive Datasource for Angular

Usage no npm install needed!

<script type="module">
  import matheoDatasource from 'https://cdn.skypack.dev/@matheo/datasource';
</script>

README

Reactive Datasource

MIT badge npm dependencies npm devDependencies

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