Defer Defer 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.
DataTable is not loaded, scroll down to initialize it.
Vin Year Brand Color {{}} {{car.year}} {{car.brand}} {{car.color}}


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>
       deferred content


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

<div pDefer (onLoad)="initData()">
        <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>
</div> = //initialize


Directive has no attributes.


Name Parameters Description
onLoad - Callback to invoke when deferred content is loaded.


Directive does not apply any styling to host.



View on GitHub

<div pDefer (onLoad)="initData()">
        <p-table [value]="cars">
            <ng-template pTemplate="header">
            <ng-template pTemplate="body" let-car>

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 => = cars);