Defer

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


import { DeferModule } from 'primeng/defer';

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

Content is not loaded yet, scroll down to initialize it.


<div pDefer (onLoad)="onLoad()">
    <ng-template>
        <img 
            class="w-full md:w-30rem md:block md:mx-auto" 
            src="https://primefaces.org/cdn/primeng/images/demo/nature/nature1.jpg" 
            alt="Prime" />
    </ng-template>
</div>

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

Table is not loaded yet, scroll down to initialize it.


<div pDefer (onLoad)="initData()">
    <ng-template>
        <p-table [value]="cars" responsiveLayout="scroll">
            <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>