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

Defer - 图1

Documentation

Import

  2. import {DeferModule} from 'primeng/defer';
  3.  

Getting Started

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

  2. <div pDefer>
  3.     <ng-template>
  4.        deferred content
  5.    </ng-template>
  6. </div>
  7.  

Callback

onLoad callback is useful to initialize the content when it becomes visible on scroll such as loading data.

  2. <div pDefer (onLoad)="initData()">
  3.     <ng-template>
  4.         <p-dataTable [value]="cars">
  5.             <p-column field="vin" header="Vin"></p-column>
  6.             <p-column field="year" header="Year"></p-column>
  7.             <p-column field="brand" header="Brand"></p-column>
  8.             <p-column field="color" header="Color"></p-column>
  9.         </p-dataTable>
  10.     </ng-template>
  11. </div>
  12.  
  2. this.cars = //initialize
  3.  

Properties

Directive has no attributes.

Events

NameParametersDescription
onLoad-Callback to invoke when deferred content is loaded.

Styling

Directive does not apply any styling to host.

Dependencies

None.

Source

View on GitHub

  2. <div pDefer (onLoad)="initData()">
  3.     <ng-template>
  4.         <p-table [value]="cars">
  5.             <ng-template pTemplate="header">
  6.                 <tr>
  7.                     <th>Vin</th>
  8.                     <th>Year</th>
  9.                     <th>Brand</th>
  10.                     <th>Color</th>
  11.                 </tr>
  12.             </ng-template>
  13.             <ng-template pTemplate="body" let-car>
  14.                 <tr>
  15.                     <td>{{car.vin}}</td>
  16.                     <td>{{car.year}}</td>
  17.                     <td>{{car.brand}}</td>
  18.                     <td>{{car.color}}</td>
  19.                 </tr>
  20.             </ng-template>
  21.         </p-table>
  22.     </ng-template>
  23. </div>
  24.  
  2. export class DeferDemo {
  4.     cars: Car[];
  6.     constructor(private carService: CarService, private messageService: MessageService)  {}
  8.     initData()  {
  9.         this.messageService.add({severity:'success', summary:'Data Initialized', detail:'Render Completed'});
  10.         this.carService.getCarsSmall().then(cars => this.cars = cars);
  11.      }
  12.  }
  13.