Angular PrimeNG VirtualScroller Prepopulated List

Angular PrimeNG is an open-source UI component library for Angular applications. It provides a set of high-quality, cross-browser-compatible UI components that can be easily integrated into Angular applications to create modern and responsive user interfaces. PrimeNG offers a wide range of components, including form elements, data displays, dropdown, calendar, virtualScroller, and various other UI elements. These components are built using CSS3 and JavaScript, and they are designed to be customizable and easy to use. In this article, we will see how to use the VirtualScroller Prepopulated List in Angular PrimeNG.

The VirtualScroller is a UI component of Angular PrimeNG that optimizes rendering large datasets by rendering only the visible portion of the data, using lazy loading and virtual rendering techniques. This improves performance and provides a smoother user experience. A Prepopulated list is a list that already contains a set of predefined values, typically used as a reference or a starting point. This is often utilized to facilitate the users with a set of options to choose from, rather than requiring them to enter their own values, in order to enhance the user interface.

Creating Angular Application & Module Installation:

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

ng new myapp

Step 2: After creating your Angular application i.e. myapp, move to it using the following command.

cd myapp

Step 3: To use the VirtualScroller in our Angular application, we need to install the PrimeNG library using the following command.

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

Step 4: To run the app use the following command

ng serve --open

Project Structure: The project structure will look like the following:

project structure

Example 1: In this example, we create a prepopulated list of cities and states with the help of the VirtualScroller component using Angular PrimeNG.

app.component.html

<h1 style="color:green">
      GeeksforGeeks
</h1>
<h3>
      VirtualScroller Prepopulated List
</h3>

<div class="container">
    <h4>City and State List</h4>
    <div class="list-container">
        <p-virtualScroller [value]="cities"
                           [itemSize]="30"
                           [scrollHeight]="'300px'">
            <ng-template let-city pTemplate="item">
                <div>
                      {{city.city}}, {{city.state}}
                  </div>
            </ng-template>
        </p-virtualScroller>
    </div>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: `./app.component.html`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    cities: { city: string, state: string }[] = [
        { city: 'New York', state: 'NY' },
        { city: 'Los Angeles', state: 'CA' },
        { city: 'Chicago', state: 'IL' },
        { city: 'Houston', state: 'TX' },
        { city: 'Phoenix', state: 'AZ' },
        { city: 'Philadelphia', state: 'PA' },
        { city: 'San Antonio', state: 'TX' },
        { city: 'San Diego', state: 'CA' },
        { city: 'Dallas', state: 'TX' },
        { city: 'San Jose', state: 'CA' },
        { city: 'New York', state: 'NY' },
        { city: 'Los Angeles', state: 'CA' },
        { city: 'Chicago', state: 'IL' },
        { city: 'Houston', state: 'TX' },
        { city: 'Phoenix', state: 'AZ' },
        { city: 'Philadelphia', state: 'PA' },
        { city: 'San Antonio', state: 'TX' },
        { city: 'San Diego', state: 'CA' },
        { city: 'Dallas', state: 'TX' },
        { city: 'San Jose', state: 'CA' },
        { city: 'New York', state: 'NY' },
        { city: 'Los Angeles', state: 'CA' },
        { city: 'Chicago', state: 'IL' },
        { city: 'Houston', state: 'TX' },
        { city: 'Phoenix', state: 'AZ' },
        { city: 'Philadelphia', state: 'PA' },
        { city: 'San Antonio', state: 'TX' },
        { city: 'San Diego', state: 'CA' },
        { city: 'Dallas', state: 'TX' },
        { city: 'San Jose', state: 'CA' }
    ];
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { VirtualScrollerModule }
    from 'primeng/virtualscroller';
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        VirtualScrollerModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Example 2: In this example, we create a button to add more cities and states by taking input from the user.

app.component.html

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    VirtualScroller Prepopulated List
</h3>

<div class="container">
    <h1>City and State List</h1>
    <div class="input-group mb-3">
        <input type="text"
               class="form-control"
               placeholder="City"
               [(ngModel)]="newCity">
        <input type="text"
               class="form-control"
               placeholder="State"
               [(ngModel)]="newState">
        <div class="input-group-append">
            <button class="btn btn-primary"
                    type="button"
                    (click)="addCity()">
              Add
          </button>
        </div>
    </div>
    <p-virtualScroller [value]="cities"
                       [itemSize]="30"
                       [scrollHeight]="'300px'">
        <ng-template let-city pTemplate="item">
            <div>
                {{city.city}}, {{city.state}}
            </div>
        </ng-template>
    </p-virtualScroller>
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: `./app.component.html`,
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    cities: { city: string, state: string }[] = [
        { city: 'New York', state: 'NY' },
        { city: 'Los Angeles', state: 'CA' },
        { city: 'Chicago', state: 'IL' },
        { city: 'Houston', state: 'TX' },
        { city: 'Phoenix', state: 'AZ' },
        { city: 'Philadelphia', state: 'PA' },
        { city: 'San Antonio', state: 'TX' },
        { city: 'San Diego', state: 'CA' },
        { city: 'Dallas', state: 'TX' },
        { city: 'San Jose', state: 'CA' },
        { city: 'Philadelphia', state: 'PA' },
        { city: 'San Antonio', state: 'TX' },
        { city: 'San Diego', state: 'CA' },
        { city: 'Dallas', state: 'TX' },
        { city: 'San Jose', state: 'CA' }
    ];

    newCity: string = '';
    newState: string = '';

    addCity() {
        if (this.newCity && this.newState) {
            this.cities.push(
                { city: this.newCity, state: this.newState });
            this.newCity = '';
            this.newState = '';
        }
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { VirtualScrollerModule }
    from 'primeng/virtualscroller';
import { FormsModule } from '@angular/forms';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        VirtualScrollerModule,
        FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Output:

Reference: https://www.primefaces.org/primeng-v14-lts/virtualscroller