Utilize PrimeNG's async pipe for lazy loading data efficiently

Question

Utilize PrimeNG's async pipe for lazy loading data efficiently

I have a significant amount of data (400,000 records) that I need to display in a PrimeNG data table. In order to prevent browser crashes, I am looking to implement lazy loading functionality for the table which allows the data to be loaded gradually.

The technologies I am utilizing for creating this table include:

Angular 7.2.4
Angular/cdk 7.3.1
ngrx-data 6.1.0-beta.3 (Ngrx http request wrapper)
PrimeNG 7.0.5 (UI Framework)
Rxjs 6.4.0

Objective

My goal is to develop a lazy loading table similar to the one illustrated in the PrimeNG documentation. The data should be fetched from the server and displayed in the table incrementally as the user navigates through different sections.

The slight variation I intend to implement involves pre-fetching all data from the server before feeding it to the table component. This approach will allow me to select specific data from the datasource and present it to the user.

Issue at Hand

During my implementation efforts, I encountered a problem where the (onLazyLoad) function is only triggered once during the OnInit() phase before data retrieval from the server. Adding [lazyLoadOnInit]="false" prevents the function from being called altogether. Despite attempting to modify the [totalRecords] property upon data retrieval, I was unable to trigger the function.

I couldn't find any other suitable function within the PrimeNG p-table code to activate the (onLazyLoad) function. Am I overlooking something?

Code Snippet

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

this.carService.entities$ initially holds a value of [] and gets populated with the outcome of the getAll() function call (it could also remain [] if there are no results).

To illustrate the issue, I've created a demonstration in StackBlitz. You'll notice that the data isn't displayed because the (onLazyLoad) event is only fired once when the initial data is empty.

It's worth noting that I'm employing the Angular Async pipe for transmitting data into my component, necessitating monitoring changes within an ngOnChanges() function.

angular typescript lazy-loading primeng primeng-datatable

Answer 1

Answer №1

To update the app.template, make the following changes:

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

It appears that p-table lazyload does not trigger when the data changes, even when transitioning from undefined to object(array)

Visit stackblitz for more details

Update:

Retrieve data without using the async pipe:

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

Utilize ngOnChanges method for:

  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;
      }
    }
  }

Refer to this article for a guide on using async pipe and change detection

View another example on stackblitz

Answer 2

To update the app.template, make the following changes:

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

It appears that p-table lazyload does not trigger when the data changes, even when transitioning from undefined to object(array)

Visit stackblitz for more details

Update:

Retrieve data without using the async pipe:

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

Utilize ngOnChanges method for:

  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;
      }
    }
  }

Refer to this article for a guide on using async pipe and change detection

View another example on stackblitz

Answer 3

Answer №2

Special thanks to malbarmawi who helped me successfully update the table with new records. The only remaining issue was that lazy loading was being triggered too early, causing the data not to load properly.

In order to solve this problem, I realized that the table's methods are public and decided to inject the table as a @ViewChild so I could manually trigger the lazy loading process.

/**
 * A reference to the primeng table. Since all of it's methods are public we can
 * directly access the methods we need to trigger lazy loading correctly.
 */
@ViewChild(Table)
private tableRef: Table;

public ngOnChanges(change: SimpleChanges): void {
   if(change.data && change.data.currentValue) {
     this.datasource = change.data.currentValue;
     this.totalRecords = Array.isArray(change.data.currentValue) ? change.data.currentValue.length : 0;

     // Trigger lazy loading
     this.tableRef.onPageChange({ first: 0, rows: this.rows });
   }
}

With the implementation of lazy loading, I was also able to add a virtual scroller to enhance the performance of the table and smoothly manage my 400,000 records.

To achieve this, I simply updated the table properties to include the following (noting the virtual- properties):

<p-table [columns]="cols" [value]="cars" [scrollable]="true" [rows]="rows" [scrollHeight]="scrollHeight" [virtualRowHeight]="rowHeight" [virtualScroll]="true" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)"  [totalRecords]="totalRecords" [loading]="isLoading"></p-table>

You can view a fully functional example of this code on StackBlitz.

Answer 4

Special thanks to malbarmawi who helped me successfully update the table with new records. The only remaining issue was that lazy loading was being triggered too early, causing the data not to load properly.

In order to solve this problem, I realized that the table's methods are public and decided to inject the table as a @ViewChild so I could manually trigger the lazy loading process.

/**
 * A reference to the primeng table. Since all of it's methods are public we can
 * directly access the methods we need to trigger lazy loading correctly.
 */
@ViewChild(Table)
private tableRef: Table;

public ngOnChanges(change: SimpleChanges): void {
   if(change.data && change.data.currentValue) {
     this.datasource = change.data.currentValue;
     this.totalRecords = Array.isArray(change.data.currentValue) ? change.data.currentValue.length : 0;

     // Trigger lazy loading
     this.tableRef.onPageChange({ first: 0, rows: this.rows });
   }
}

With the implementation of lazy loading, I was also able to add a virtual scroller to enhance the performance of the table and smoothly manage my 400,000 records.

To achieve this, I simply updated the table properties to include the following (noting the virtual- properties):

<p-table [columns]="cols" [value]="cars" [scrollable]="true" [rows]="rows" [scrollHeight]="scrollHeight" [virtualRowHeight]="rowHeight" [virtualScroll]="true" [lazy]="true" (onLazyLoad)="loadCarsLazy($event)"  [totalRecords]="totalRecords" [loading]="isLoading"></p-table>

You can view a fully functional example of this code on StackBlitz.

Answer 5

Answer №3

Here is a different approach for handling loading indicators in Angular, inspired by this source. This method involves defining helper functions as shown below :

/**
 * Custom operator to detect the start and end of loading.
 */
export function interceptLoading<T>(onstart: () => void, onstop: () => void): (source: Observable<T>) => Observable<T> {
    return (source$: Observable<T>): Observable<T> =>
        source$.pipe(
            prepare(onstart),
            finalize(onstop)
        );
}

/**
 * Operator that triggers a callback when subscribed
 */
function prepare<T>(callback: () => void): (source: Observable<T>) => Observable<T> {
    return (source$: Observable<T>): Observable<T> =>
        defer(() => {
            callback();
            return source$;
        });
}

To implement this in your component, you can use it like so :

loading = true;

[...]

return this.service.getAll$().pipe(
     interceptLoading(() => this.loading = true, () => this.loading = false),
     map(...)
 );

Then, in your PrimeNG table component:

<p-table [loading]="loading" ...>

Answer 6

Here is a different approach for handling loading indicators in Angular, inspired by this source. This method involves defining helper functions as shown below :

/**
 * Custom operator to detect the start and end of loading.
 */
export function interceptLoading<T>(onstart: () => void, onstop: () => void): (source: Observable<T>) => Observable<T> {
    return (source$: Observable<T>): Observable<T> =>
        source$.pipe(
            prepare(onstart),
            finalize(onstop)
        );
}

/**
 * Operator that triggers a callback when subscribed
 */
function prepare<T>(callback: () => void): (source: Observable<T>) => Observable<T> {
    return (source$: Observable<T>): Observable<T> =>
        defer(() => {
            callback();
            return source$;
        });
}

To implement this in your component, you can use it like so :

loading = true;

[...]

return this.service.getAll$().pipe(
     interceptLoading(() => this.loading = true, () => this.loading = false),
     map(...)
 );

Then, in your PrimeNG table component:

<p-table [loading]="loading" ...>

Utilize PrimeNG's async pipe for lazy loading data efficiently

Answer №1

Answer №2

Answer №3

Similar questions

A guide on converting array values to objects in AngularJS HTML

In Angular 12, the search button's response data does not appear in the template until the button is clicked twice

The inner panel height does not extend to 100% when there is overflow

Avoid the import of @types definition without exports in TypeScript to prevent the error TS2306 (not a module)

Unable to activate parameter function until receiving "yes" confirmation from a confirmation service utilizing a Subject observable

Can the geocoder API/search box be utilized to locate specific markers on a map?

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

Exploring the intricacies of extracting nested JSON data in TypeScript

Angular Observables do not update local variables when making API calls

Best practices for handling HTTP requests in Angular 5

Display identical text using JavaScript filter

Navigating through the keys of a parameter that can assume one of three distinct interfaces in TypeScript: a guide

Invalid Redux store: Element type is not valid; a string type is expected

Unauthorized access for POST request in WooCommerce API: 401 error

When you use npm uninstall, it deletes the package from package.json, but it does not remove it from the node_modules directory

Discovering the power of Angular 2 with ngrx while putting my Reducer to the

The issue of LazyLoader delay not functioning as expected

Angular: issue with form validation - password matching is not functioning as expected

I can see the JSON data printing to the console in Ionic 3, but it doesn't display on

UI and `setState` out of sync