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.vin}} {{car.year}} {{car.brand}} {{car.color}}

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

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

Styling

Directive does not apply any styling to host.

Dependencies

None.

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