Angular PrimeNG VirtualScroller Styling

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

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

Angular PrimeNG VirtualScroller Styling: This component helps to make the interactive Form VirtualScroller by implementing the different stylings provided by Angular PrimeNG.

These styling components are described below:

• p-virtualscroller: This is used for the Container element.
• p-virtualscroller-header: This is used for the Header section.
• p-virtualscroller-footer: This is used for the Footer section.
• p-virtualscroller-content: This is used for the Content section.
• p-virtualscroller-list : This is used for the list element.

Syntax:

<p-virtualScroller 
    [value]="..." scrollHeight="..." [itemSize]="...">
    <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:

Example 1: In this example, we will learn about p-virtualscroller.

• 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>
        <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[]=[];

    ngOnInit() {
        this.items = [
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },
            {
                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"
            },
            {
                label: "Search"
            },
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },

            {
                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"
            },
            {
                label: "Search"
            }
        ];
    }
}

• 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: In this example, we will learn about p-virtualscroller-header and p-virtualscroller-footer.

• 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>
         <ng-template pTemplate="header">
              I am Header of VirtualScroller
           </ng-template>
         <ng-template pTemplate="item" let-item>
              {{item.label}}
        </ng-template>
        <ng-template pTemplate="footer">
                I am Footer of VirtualScroller
          </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[]=[];

    ngOnInit() {
        this.items = [
            {
                label: "Visit Website"
            },
            {
                label: "Like"
            },
            {
                label: "More"
            },
            {
                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"
            },
            {
                label: "Search"
            },
            {
                label: "Visit Website"
            },
            {
                label: "Like"

            },
            {
                label: "More"
            },
            {
                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"

            },
            {
                label: "Search"
            }
        ];
    }
}

• 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