Defer postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
import { Defer } 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>