Components: schematic(table): using generated DataSource with async data source

[b-mi]

What is the expected behavior?

Documentation for how to get async data DataSource connect() from (http.get.....().subscribe()....)

I don't ask for example with static data nor old syntax, but how to use with actual schematic for Table and his DataSource

What is the current behavior?

DataSource extension is generated like this:

connect(): Observable<any[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.

    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginator's length
    this.paginator.length = this.data.length;

    return merge(...dataMutations).pipe(map(() => {
      return this.getPagedData(this.getSortedData([...this.data]));
    }));

  }

No documentation, where and how to call http.get....... for getting async data for connect() method.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Try to use material table schematic and fill connect() not with static data but async call like http.get...

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Actual angular, actual material 7.3.7, needed typescript

Is there anything else we should know?

[Splaktar]

nor old syntax

Which "old syntax" are you referring to here?

Please review the Angular HttpClient Guide for details on retrieving async data from an API.

[b-mi]

Splaktar, I don't have problem with usage of HttpClient - it works perfectly. I have problem how to connect async data with new/actual version of table schematic.

1. angular table schematic should not use as a sample static data, but async data.

2. As an answer to my question should be that I don't need change connect() method, but I should get async data first and then create DataSource. It is better, but still with some strange errors.

I need fully functional sample with async data, not static. (No, I do not need link for HttpClient!!)

"Old syntax"? Google and look at various versions of usage material table schematic.

Thanks.

[Splaktar]

@b-mi I'm not sure if it's just a language barrier issue or not, but your comments seem to be vague, evasive, and slightly rude. I'm trying to help you, but you seem to be refusing to provide answers to simple requests for clarification.

I've opened up https://github.com/angular/material2/pull/15800 to fix one issue that you reported. Hopefully you find that helpful.

I don't believe that we have any plans to ship a table schematic that connects to a real API asynchronously.

That said, the connect() function is already set up to use async data:
https://github.com/angular/material2/blob/159616096f860652dea991d36a4890bae34983b9/src/lib/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts#L58-L66

If you want to hook up another set of data, you can replace the observableOf(this.data), with the Observable for your data.

[b-mi]

How to change

const dataMutations = [ 
   observableOf(this.data), 
   this.paginator.page, 
   this.sort.sortChange 
 ]; 

to calling api asynchronously?

This has compilation error, without subscribe no data is getting:

const dataMutations = [ observableOf(this.service.getIOPList(10052).subscribe(r => this.data = r.table), // this is http.get this.paginator.page, this.sort.sortChange ];

I need get data by calling:

this.service.getIOPList(10052).subscribe(r => this.data = r.table);

How to use this in connect() method?

Thank you.

[Splaktar]

Ah OK, I see what you mean now.

On the MatTable examples page, the "Table retrieving data through HTTP" example could be helpful. Here's a Stackblitz link to that example. Note that this example does paging and sorting on the server.

Looking at your getIOPList(id) call, it looks like you may be wanting an example that does paging and sorting on the client. Here's an example that does that:

  connect(): Observable<MyItem[]> {
    this.subscription = observableOf(EXAMPLE_DATA).subscribe((result: MyItem[]) => {
      this.data = result;
      this.paginator.length = this.data.length;
    });

    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations)
    .pipe(
      map(() => this.getPagedData(this.getSortedData([...this.data])))
    );
  }

Converting this for your code should look something like this:

  connect(): Observable<MyItem[]> {
    this.subscription = this.service.getIOPList(10052).subscribe(r => {
      this.data = r.table;
      this.paginator.length = this.data.length;
    });

    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    return merge(...dataMutations)
    .pipe(
      map(() => this.getPagedData(this.getSortedData([...this.data])))
    );
  }

Then you will probably want to change your template from

  <mat-paginator #paginator
      [length]="dataSource.data.length"
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>

to

  <mat-paginator #paginator
      [pageIndex]="0"
      [pageSize]="50"
      [pageSizeOptions]="[25, 50, 100, 250]">
  </mat-paginator>

[Splaktar]

We should probably have an option for indicating that the DataSource should be set up for server-side or client-side paging and sorting. This is because the structure and ordering of the RxJS code will be significantly different in these two cases.

We should probably have an option to generate a table without sorting or paging as well.

[Splaktar]

There is a proposal to "Rename MatTableDataSource to ClientArrayTableDataSource" (#14378) since the naming causes a lot of confusion. The PR is #15432. There doesn't appear to be any work towards creating a ServerArrayTableDataSource yet.

[b-mi]

Thank you, I will try it.