Angular PrimeNG VirtualScroller Events

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use Angular PrimeNG VirtualScroller Events.

VirtualScroller is an efficient way of rendering lists by displaying a small subset of data in the viewport at any time.

Angular PrimeNG VirtualScroller Events: The events are used to trigger some specific functions when the user interacts with the component so that the required action can be taken. VirtualScroller has an event called onLazyLoad which is described below:

• onLazyLoad : This is used as a callback to invoke lazy mode to load new data.

Syntax:

<p-virtualScroller 
    [value]="..." scrollHeight="..." 
    [itemSize]="..." (onLazyLoad)=function()>
    <ng-template pTemplate="item" let-item>
          .....
    </ng-template>
</p-virtualScroller>

Creating Angular application & module installation:

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: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

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

ng serve --save

Example 1: In this example, we will learn about VirtualScroller events in Angular PrimeNG. When we refresh the screen, the app may take some time to load the data. during this time, the lazy load can be seen.

• app.component.html:

HTML

<div style="width:80%">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG VirtualScroller Styling
    </h2>
    <p-virtualScroller
        [value]="items" scrollHeight="250px" [itemSize]="20"
        [lazy]="true" [delay]=250 (onLazyLoad)=onLazyLoad()>
        <ng-template pTemplate="item" let-item>
            {{item.label}}
        </ng-template>
    </p-virtualScroller>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { LazyLoadEvent,SelectItem } from 'primeng/api';

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

export class AppComponent {
    items: MenuItem[]=[];

    onLazyLoad(){
        alert("On Lazy Load Called")
    }
    ngOnInit() {
        this.items = [
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },
            {
                label: "Share"
            },
            {
                label: "Search"
            },
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },
            {
                label: "Share"
            },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ContextMenuModule } from "primeng/contextmenu";
import {VirtualScrollerModule} from 'primeng/virtualscroller';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ContextMenuModule,
        TableModule,
        VirtualScrollerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Example 2: This is another example of onLazyLoad. In this example, we can see the parameters passed with the onLazyLoad. These are the index of the first item and the index of the last item.

• app.component.html:

HTML

<div style="width:80%">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h2>
        Angular PrimeNG VirtualScroller Styling
    </h2>
    <p-virtualScroller
        [value]="items" scrollHeight="250px" [itemSize]="20"
        [lazy]="true" [delay]=250 (onLazyLoad)=onLazyLoad($event)>
        <ng-template pTemplate="item" let-item>
            {{item.label}}
        </ng-template>
    </p-virtualScroller>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
import { LazyLoadEvent,SelectItem } from 'primeng/api';

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

export class AppComponent {
    items: MenuItem[]=[];

    onLazyLoad(event:any){
        alert(
            "First Item called at Index: "+
             event.first +
            " and last item called at index: "+
             event.last)
    }
    ngOnInit() {
        this.items = [
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },
            {
                label: "Share"
            },
            {
                label: "Search"
            },
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },

            {
                label: "Subscribe"
            },
            {
                label: "Quit"
            },
            {
                label: "New"
            },
            {
                label: "Share"
            },
        ];
    }
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ContextMenuModule } from "primeng/contextmenu";
import {VirtualScrollerModule} from 'primeng/virtualscroller';
import { TableModule } from 'primeng/table';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ContextMenuModule,
        TableModule,
        VirtualScrollerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Reference: http://primefaces.org/primeng/virtualscroller