angulartypescriptlazy-loadingprimengprimeng-datatable

PrimeNG Lazy load data with async pipe

I have a very large amount of data (400.000 records) that I need to show in a PrimeNG data table. For this I need a lazy loading table, since you cannot load all data into the table in one time (this will make your browser crash).

For creating the table I am using the following technologies:

What do I want

I am trying to create a lazy loading table as shown in the PrimeNG docs, where the data is loaded from the server and shown in table. When the user navigates to the next tab the next x amount of data is loaded and shown.

The only difference is that I fetch all the data from the server before giving it to the table component. This way I will only have to pick certain data from the datasource and show it to the user.

The problem

While trying to implement it I ran into the problem that the (onLazyLoad) function is only called once, in the onInit() phase, before the data is loaded from the server.

I can undo this by adding [lazyLoadOnInit]="false", but this results in the lazy load function not being called at all. I was hoping I could trigger the load function by changing the [totalRecords] property when the data is loaded, but this also doesn't trigger the function.

I cannot find any other function in the PrimeNG p-table code that I could use for triggering the (onLazyLoad), or am I missing something?

Code

public ngOnInit(): void {
  this.cars$ = this.carService.entities$; // = []
  this.carService.getAll(); // = [Car, Car, Car, Car] OR []
}

this.carService.entities$ has a default value of [] and is populated with the result of the getAll() function (this can also be [] if there are no results)

I have reproduced my problem in a StackBlitz. Here you can see that the data is never shown, because the (onLazyLoad) is only called the first time, when the data is empty.

Note that I am using the Angular Async pipe for passing the data into my component. This means I need to check the changes in a ngOnChanges() function.

Solution

  • Just update the app.template like this

    <ng-container *ngIf="cars$ | async as data">
  <table-component [data]="data"></table-component>
</ng-container>

    It seems p-table lasyload dosn't trigger when the data change, even when the data property change from undefined to object(arry)

    stackblitz

    Updated

    Without async pipe get the data

      public ngOnInit(): void {
    this.carService.getAll().subscribe(data => this.data = data);
  }

    ngOnChanges method

      public ngOnChanges(change: SimpleChanges): void {
    if(change.data) {
      if (change.data.currentValue) {
      this.datasource = change.data.currentValue;
      this.totalRecords = Array.isArray(change.data.currentValue) ? change.data.currentValue.length : 0;
      this.cars = this.datasource.slice(0, 10); // row number
      this.loading = false;
      }
    }
  }

    check this article explains how to use async pipe and change detection

    stackblitz