DEV Community

loading...
Cover image for Angular Defer

Angular Defer

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
this.cars = //initialize
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

Forem Open with the Forem app