Angular PrimeNG Lazy Loading Datatable (2024) Example

Overview

We demonstrated Angular PrimeNG eager loading DataTable with pagination in the previous tutorial. We'll use the same example and change the source code to make the datatable Lazy loading.

We will follow below steps to build this example

1. First we will create an Angular Project.
2. We will Setup PrimeNG.
3. Adding the PrimeNG DataTable Component.
4. Finally we will test with data.

Angular PrimeNG Lazy Loading Datatable Project Structure:

Flight Model

Since our Angular application will fetch from and persist Flight entities in the database, let's implement a simple domain model flight with TypeScript.

Let's open a terminal console and create a model directory and then and within that directory, issue the following command:

ng generate class flight

Here is code for flight Model

export interface Flight{
    flightNumber : string;
    origin : string;
    destination : string;
}

Flight service

ng generate service flight

From flight service flights.service.ts, will use getFlightsData method to load the data for dynamic data.

import { Injectable } from '@angular/core';
import { Flight } from "../model/flight";
import { HttpClient } from '@angular/common/http';

@Injectable()
export class FlightsService {

  constructor(private http: HttpClient) {
  }

  public getFlightsData() {
    return this.http.get<any>('assets/data.json')
      .toPromise()
      .then(res => {return <Flight[]>res;});
    }

}

Component

We will be creating My Flights Component which will fetch data from spring boot service and display it later.
Lets begin with the My Flights component Open a command prompt and use the following command-

ng generate component my-flights

Here is code for our my flight template component my-flights.component.html

<p-table [columns]="cols" [value]="flights" [lazy]="true"
(onLazyLoad)="loadFlightData($event)" [paginator]="true" [rows]="10" totalRecords="40"
 [loading]="loading">

    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowFlightData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowFlightData[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

my-flights.component.ts

import { Component, OnInit } from '@angular/core';
import {Flight} from '../model/flight';
import { FlightsService } from 'src/app/service/flights.service';
import { LazyLoadEvent } from 'primeng/api';

@Component({
  selector: 'app-my-flights',
  templateUrl: './my-flights.component.html',
  styleUrls: ['./my-flights.component.scss']
})
export class MyFlightsComponent implements OnInit {
  slicedDatabase: Flight[];

  flights: Flight[];

  cols: any[];

  totalRecords: number;

  loading: boolean;

  constructor(private flightService: FlightsService) {
  }

  ngOnInit() {
    this.flightService.getFlightsData().
      then(flights => {
        this.slicedDatabase = flights,
        this.totalRecords = this.flights.length;
      });


    this.cols = [
      { field: 'flightNumber', header: 'Flight' },
      {field: 'origin', header: 'From' },
      { field: 'destination', header: 'To' },
      { field: 'departDay', header: 'Depart Day' },
      { field: 'price', header: 'Price ($)' }
  ];
  this.totalRecords=40;
  }

  loadFlightData(event: LazyLoadEvent) {
    this.loading = true;

    // here we can fetch data from backend api database    
    //event.first = offset of the first row. 1 for the first page, 11 for the second page.
    //event.rows = rows per page (10)
    setTimeout(() => {
      if (this.slicedDatabase) {
        this.flights = this.slicedDatabase.slice(event.first, (event.first + event.rows));
        this.loading = false;
      }
    }, 1000);
  }

}

Test Angular PrimeNG Lazy Loading Datatable

1. Run the application by using below command:

   npm serve

2. By default application will open in browser at http://localhost:4200/ and it will load the data in the datatable columns and on every pagination it would fetch the data for that page only (lazy loading).

Next we will see Angular PrimeNG DataTable Filtering.

Download Source Code

The full source code for this article can be found on below.
Download it here - Angular PrimeNG Lazy Loading Datatable Example