Angular PrimeNG Form Dropdown Virtual Scroll Component

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. This article will show us how to use the Form Dropdown Virtual Scroll Component in Angular PrimeNG.

The Virtual Scroll Component is used to create a virtual scroll at the correct position to scroll the items in the dropdown menu.

By displaying only a small portion of the data in the viewport at any given time, VirtualScrolling is an effective method for rendering the options. To avoid performance issues when dealing with a large number of options, VirtualScrolling should be enabled. Setting the virtualScroll property to true and defining the virtualScrollItemSize property to specify an item’s height is all that is required for use.

Angular PrimeNG Form Dropdown Virtual Scroll properties:

• options: It is an array object representing select items to display as the available options. It is of array data type, the default value is null.
• filter: It is used to display an input field to filter the items on keyup. It is of boolean data type, the default value is false.
• virtualScroll: This property is used to define whether the data should be loaded on demand during the scroll.
• virtualScrollItemSize: This property is used to define the height of an item in the list for VirtualScrolling.
• virtualScrollOptions: This property is used to define whether to use the scroller feature. 

Syntax:

<p-dropdown 
    [options]="..."
    placeholder="..." 
    [virtualScroll]="true" 
    [itemSize]="..."
    [filter]="...">
</p-dropdown>

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:

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

ng serve --open

Example 1: In the below code, we will be using the above syntax to demonstrate the use of the Form Dropdown Virtual Scroll Component in Angular PrimeNG.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Virtual Scroll (10000 Geeks)</h5>

<p-dropdown
    [options]="geeks"
    placeholder="Select any Geek"
    [virtualScroll]="true"
    [itemSize]="31">
</p-dropdown>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    geeks: SelectItem[];

    constructor() {
        this.geeks = [];
        for (let j = 1; j <= 10000; j++) {
            this.geeks.push({label: 'Geek ' + j, value: 'Geek ' + j});
        }
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { DropdownModule } from 'primeng/dropdown';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        DropdownModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

Example 2: Below is another code where we will be using the above syntax to demonstrate the use of the Form Dropdown Virtual Scroll Component in Angular PrimeNG. Here we’ll be using the filter to search for any item in the dropdown list.

• app.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Virtual Scroll (10000 Geeks)</h5>

<p-dropdown
    [options]="geeks"
    placeholder="Select any Geek"
    [virtualScroll]="true"
    [itemSize]="31"
    [filter]="true">
</p-dropdown>

• app.component.ts:

Javascript

import { Component } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    geeks: SelectItem[];

    constructor() {
        this.geeks = [];
        for (let j = 1; j <= 10000; j++) {
            this.geeks.push(
                {
                    label: 'Geek ' + j,
                    value: 'Geek ' + j
                }
            );
        }
    }
}

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { DropdownModule } from 'primeng/dropdown';

@NgModule({
    imports: [
        BrowserAnimationsModule,
        DropdownModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})

export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/dropdown