Angular PrimeNG Defer Callback
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;" >w3wiki</ 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 = "w3wiki" [style]="{'width': '400px'}"> < p > < b >Secret:</ b > It is a COmputer Science portal for all Beginner. </ 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;" > w3wiki </ 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: "w3wiki" , 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 {} |
Output:
Reference: https://primefaces.org/primeng/defer