Angular PrimeNG Defer Callback

Last Updated : 26 Apr, 2025

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for various tasks like inputs, menus, charts, Buttons, etc. In this article, we will discuss Angular PrimeNG Defer Callback.

The Defer Component is used to postpone the loading of the content that is initially out of the viewport and will be visible when the user will scroll the page. There is just one event for the Defer component, that is, onLoad. When content becomes visible on scroll due to the loading of data, the onLoad callback is helpful in initializing the content.

Angular PrimeNG Defer Callback:

onLoad: This event accepts a callback function that is invoked when the deferred content is loaded.

Syntax:

<div pDefer (onLoad)="callback()">
   <ng-template>
       <!-- Content to load on visible -->
   </ng-template>
</div>

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Steps to run the application: Run the below command to see the output

ng serve --save

Example 1: Below is the basic example code that illustrates the use of Angular PrimeNG Defer Callback.

app.component.html:

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Angular PrimeNG Defer Callback</h4>

<h3 style="
        height: 100vh;
        width: 400px;
        padding-top: 50px;
        text-align: center;
        color: black;
        border: 5px solid green;">
        Scroll down to see the secret.
</h3>

<div pDefer (onLoad)="gfg()">
    <ng-template>
        <p-panel header="GeeksforGeeks" 
            [style]="{'width': '400px'}">
            <p>
                <b>Secret:</b>
                 It is a COmputer Science 
                   portal for all geeks.
            </p>
        </p-panel>
    </ng-template>
</div>

<p-toast></p-toast>

app.component.ts:

JavaScript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})

export class AppComponent {
    constructor(
        private msgService: MessageService
    ){}
    
    gfg() {
        this.msgService.add({
            severity: "success",
            summary: "Deferred Content Loaded",
            detail: "Wooha! secret revealed"
        });
    }
}

app.module.ts:

JavaScript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { PanelModule } from "primeng/panel";
import { ToastModule } from "primeng/toast";
import { DeferModule } from "primeng/defer";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        PanelModule,
        ToastModule,
        DeferModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Example 2: Below is another basic example code that illustrates the use of Angular PrimeNG Defer Callback.

app.component.html:

HTML

<div style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Angular PrimeNG Defer Callback</h3>
</div>

<div style=
    "height: 800px; 
    margin: 50px;
    text-align: center;
    font-weight: bold;
    color: red;">
    Scroll Down to see the table and the toast.
</div>

<div pDefer (onLoad)="gfg()">
    <ng-template>
        <p-table [value]="tutorials" 
                 responsiveLayout="scroll">
            <ng-template pTemplate="header">
                <tr>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Rating</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-tutorial>
                <tr>
                    <td>{{ tutorial.title }}</td>
                    <td>{{ tutorial.category }}</td>
                    <td>{{ tutorial.rating }}</td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</div>

<p-toast></p-toast>

app.component.ts:

JavaScript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})

export class AppComponent {
    tutorials: Tutorial[];
    constructor(
        private messageService: MessageService
    ){}

    myData() {
        this.tutorials = [
            {
                title: "Queue",
                category: "Data Structure",
                rating: 4
            },
            {
                title: "Circularly LinkedList",
                category: "Data Structure",
                rating: 5
            },
            {
                title: "Doubly LinkedList",
                category: "Data Structure",
                rating: 3
            },
            {
                title: "Singly LinkedList",
                category: "Data Structure",
                rating: 4
            },
            {
                title: "Doubly Ended Queue",
                category: "Data Structure",
                rating: 5
            },
            {
                title: "Binary Search Tree",
                category: "Data Structure",
                rating: 4
            },
            {
                title: "Red Black Tree",
                category: "Data Structure",
                rating: 5
            },
            {
                title: "Breadth First Search",
                category: "Graph",
                rating: 4
            },
            {
                title: "Floyd's Cycle",
                category: "Algorithm",
                rating: 4
            },
            {
                title: "Travelling Salesman Problem",
                category: "Algorithm",
                rating: 5
            },
            {
                title: "Bellman Ford",
                category: "Graph",
                rating: 4
            },
            {
                title: "KMP Algorithm",
                category: "String",
                rating: 5
            }
        ];
    }

    gfg() {
      this.messageService.add({
          severity: "success",
          summary: "GeeksforGeeks",
          detail: "Angular PrimeNG Defer Component"
      });
      this.myData();
  }
}



export interface Tutorial {
    title?: string;
    category?: string;
    rating?: number;
}

app.module.ts:

JavaScript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CarService } from "./carservice";
import { ToastModule } from "primeng/toast";
import { DeferModule } from "primeng/defer";
import { TableModule } from "primeng/table";

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        DeferModule,
        ToastModule,
        TableModule,
        HttpClientModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [CarService]
})

export class AppModule {}