Open In App

Angular PrimeNG Defer Events

Improve
Improve
Like Article
Like
Save
Share
Report

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

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.

Angular PrimeNG Defer Events:

  • 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:

Project Structure

Example 1: In this example, we used the pDefer directive on the panel component and we pushed a toast message to the screen when the panel gets loaded.

  • app.component.html:

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Defer Events</h4>
  
<h3 class="filler">Filler Content</h3>
<div pDefer (onLoad)="deferredContentLoaded()">
    <ng-template>
        <p-panel 
            header="Deferred Panel" 
            [style]="{'width': '400px'}">
            <p>
                This panel was not loaded initially. 
                It gets loaded when we scroll down.
            </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',
    styles: [
        `
        .filler {
            height: 100vh;
            width: 400px;
            padding-top: 50px;
            text-align:center;
            color: white;
            background: green;
        }
        `
    ],
    providers: [MessageService]
})
export class AppComponent { 
    constructor(private msgService: MessageService){}
    deferredContentLoaded()
    {
        this.msgService.add({
            severity: "success",
            summary: "Deferred Content Loaded",
            detail: "Defer onLoad Event"
        })
    }
}


  • 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: In this example, we used a calendar as the deferred content. A toast message is shown when the calendar gets loaded.

  • app.component.html:

HTML




<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Defer Events</h4>
  
<h3 class="filler-content">Filler Content</h3>
<div pDefer (onLoad)="calendarLoaded()">
    <ng-template>
        <p-calendar [inline]="true"></p-calendar>
    </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',
    styles: [
        `
        .filler-content {
            height: 100vh;
            width: 400px;
            padding-top: 50px;
            text-align:center;
            color: white;
            background: green;
        }
        `
    ],
    providers: [MessageService]
})
export class AppComponent { 
    constructor(private msgService: MessageService){}
    calendarLoaded()
    {
        this.msgService.add({
            severity: "warn",
            summary: "Calendar Loaded",
            detail: "Defer onLoad Event fired"
        })
    }
}


  • 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 { CalendarModule } from 'primeng/calendar';
import { ToastModule } from 'primeng/toast';
import { DeferModule } from 'primeng/defer';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        CalendarModule,
        ToastModule,
        DeferModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }


Output:

 

Reference: https://www.primefaces.org/primeng/chip



Last Updated : 02 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads