Angular Defer

Angular Defer postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

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

this.cars = //initialize

Theming

Defer supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Defer showcase for demos and documentation.