Bind data for a component on load

Question

I'm trying to use this data table in my app: https://github.com/ssuperczynski/ngx-easy-table/wiki

My problem is binding the data which is coming from the api. If I set the data manually it works.

<ngx-table [configuration]="configuration"
           [data]="data"
           [columns]="columns">
</ngx-table>

class SomeClass {
  public ngOnInit(): void {
    this.callGetResources();

    // ngx-easy-table
    //this.data.push({Name: 'French', Uri: 'file:///C:.../french.csv'}); //this works
    this.configuration = ConfigService.config;
  }

  action(): void {
    this.resourcesService.getResources(Config.DEFAULT_USER)
      .finally(() => {
        //console.log("Finished");
        this.resourcesTable.data = this.data; //doesn't work
      })
      .subscribe(res => {
        this.data.push(res);  //doesn't work!!!
        console.log(this.data);
      });
  }

}

I tried to use *ngIf for loading that component only when there is data, but it stopped loading (data is still not populated at that point):

<ngx-table *ngIf="loadTableComponent"

(loadTableComponent become true on my finally block.)

Other direction was calling the service for getting the data ngOnChanges before the ngOnInit, but didn't help either.

How can I set the [data] attribute of the ngx-table component in this case? I think the implementation of that component should use 2 way binding for data. Is there a workaround meanwhile?

Answer 1

Probably because in first few ms data is null, do you have some error in console? Maybe this can fix your issue:

 public data = []

First create empty array and after you receive data from api everything will works...

Answer 2

Pipe async did the trick:

<ngx-table
  [configuration]="configuration"
  [data]="resources | async"
...
>

Where resources is an observable array:

resources: Observable<Array<any>>;
this.resources = this.resourcesService.getResources(Config.DEFAULT_USER);