How to properly handle an array of objects for md-table in a generic component?

Question

Angular

Good day,
As you know, datatable material design has been released for Angular. But since it is a composite one (you need to write sortings, filters, etc.), I am making a common component in order to write all this once and, of course, do not forget about the buns.
But I can’t figure out how to transfer data to md-table itself. An example on Plunker
That is, let's say, in the main component, I received data from the backend, processed it, and then passed it to the general component MdTableComponent. And here is the rub.
First, the data is hardcoded. And you need to make a request to back, get the data, process it, and only then send it to build a table.
Secondly, it turns out two classes in the main component, which means that while the request is in progress, I cannot pass any parameters, for example, enabling the preloader or something else
... I'm sorry, I gave the wrong link to Plunker. updated

Answer 1

It will help you to define your custom DataSource inherited from the typed one from '@angular/cdk'.
In the future, I would advise you to make it once a generic with common parameters for you (be it sorting, filtering or other postprocessors)

export class CustomDataSource extends DataSource<T> {

  constructor(
      private _customService: CustomService, 
      private _paginator: MdPaginator) { }

  connect(): Observable<T[]> {
    const displayDataChanges = [
      this._customService.getAllObjects(),
      this._paginator.page
    ];

    return Observable.merge(...displayDataChanges).map((data, page) => {
      const clonedData = data.slice();

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

  disconnect() {}
}