Large-scale applications always need best practices to improve the page loading time. It is not advisable to wait for the landing page to display until all contents in the page have been fully loaded. PrimeNG provided a defer directive which postpones the content loading until the component appears in the view port. The content will be lazily loaded when it becomes visible by the page scroll.

The pDefer directive is applied to a container element and the content needs to be wrapped with ng-template directive as follows:

<div pDefer (onLoad)="loadData()">
  <ng-template>
    deferred content
  </ng-template>
</div>

The defer directive is very helpful to lazily load huge datasets when you use data iteration components such as p-dataTable, p-dataList, p-dataGrid, and so on. The onLoad callback is used to query data from the data source on demand when the component becomes visible through page scrolling. The query is not initiated on page load so that the page is loaded quickly. A concrete example is implemented here:

<div pDefer (onLoad)="loadData()">
  <ng-template>
    <p-dataTable [value]="employees">
      <p-column field="firstName" header="First Name"></p-column>
      <p-column field="lastName" header="Last Name"></p-column>
      <p-column field="profession" header="Profession"></p-column>
      <p-column field="department" header="Department"></p-column>
    </p-dataTable>
  </ng-template>
</div>

The loadData() method fetches the employees:

loadData(): void {
  this.employeeService.getEmployees().subscribe(
    employees => this.employees = employees,
    error => this.showError(error)
  );
}