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.

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


export class DeferDemo {

    cars: Car[];
    
    msgs: Message[] = [];
            
    constructor(private carService: CarService)  {}
    
    initData()  {
        this.msgs = [{severity:'success', summary:'Data Initialized', detail:'Render Completed'}];
        this.carService.getCarsSmall().then(cars => this.cars = cars);
     }
 }