DeferDefer directive postpones the loading the content that is initially not in viewport until it becomes visible on scroll. Think of pDefer as a smart ngIf that lazily loads content when it becomes visible after page scroll. Scroll down to load the DataTable which initiates a query that is not executed on initial page load to speed up load performance.

Documentation

Import

import {DeferModule} from 'primeng/defer';
 

Getting Started

Defer is applied to a container element with pDefer directive where content needs to be placed inside an ng-template.

<div pDefer>
    <ng-template>
       deferred content
   </ng-template>
</div>
 

Callback

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.

<div pDefer (onLoad)="initData()">
    <ng-template>
        <p-dataTable [value]="cars">
            <p-column field="vin" header="Vin"></p-column>
            <p-column field="year" header="Year"></p-column>
            <p-column field="brand" header="Brand"></p-column>
            <p-column field="color" header="Color"></p-column>
        </p-dataTable>
    </ng-template>
</div>
 

this.cars = //initialize
 

Properties

Directive has no attributes.

Events

Styling

Directive does not apply any styling to host.

Dependencies

None.

Source

View on GitHub

<div pDefer (onLoad)="initData()">
    <ng-template>
        <p-table [value]="cars">
            <ng-template pTemplate="header">
                <tr>
                    <th>Vin</th>
                    <th>Year</th>
                    <th>Brand</th>
                    <th>Color</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-car>
                <tr>
                    <td>{{car.vin}}</td>
                    <td>{{car.year}}</td>
                    <td>{{car.brand}}</td>
                    <td>{{car.color}}</td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</div>
 

export class DeferDemo {
    cars: Car[];
    constructor(private carService: CarService, private messageService: MessageService)  {}
    initData()  {
        this.messageService.add({severity:'success', summary:'Data Initialized', detail:'Render Completed'});
        this.carService.getCarsSmall().then(cars => this.cars = cars);
     }
 }