Reactive Datasource for Angular

Usage no npm install needed!

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


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">
  <footer [attr.hidden]="source.total <= source.pageSize ? '' : null">

Or consume it via the dataSource pipe:

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


An example of how it can work with a Firebase backend it's here:

And the concepts behind are explained here: