Angular PrimeNG Form Dropdown Virtual Scrolling 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 Scrolling Component in Angular PrimeNG.

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

Angular PrimeNG Form Dropdown Virtual Scrolling Component 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.
• optionLabel: It is used to give the name to a label of an option. It is of string data type, the default value is the label.
• optionValue: It is used to give the name to an option’s value, defaulting to the option itself when not defined. It is of string data type, the default value is value.
• optionGroupLabel: It is used to give a name to a label in the option group. It is of string data type, the default value is the label.
• optionGroupChildren: It is used to give a name to the options field in the option group. It is of string data type, the default value is item.
• name: It is used to set the name of the input element. It is of string data type, the default value is null.
• scrollHeight: It is used to set the height of the viewport in pixels, a scrollbar is defined if the height of the list exceeds this value. It is of string data type, the default value is 200px.
• style: It is used to set an inline style of the element. It is of string data type, the default value is null.
• styleClass:  It is used to set the style class of the element. It is of string 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.
• filterValue: It is a filter displayed with this value. It is of string data type, the default value is null.
• filterBy: It decides which field or fields (comma separated) to search against. It is of string data type, the default value is null.
• filterMatchMode: It is used to define how the items are filtered. It is of string data type, the default value is contained.
• filterPlaceholder: It is used to set the placeholder text to show when the filter input is empty. It is of string data type, the default value is null.
• filterLocale: It is used to set the locale to use in filtering. The default locale is the host environment’s current locale. It is of string data type, the default value is undefined.
• required: It specifies that an input field must be filled out before submitting the form. It is of the boolean data type, the default value is false.
• disabled: It specifies that the component should be disabled. It is of the boolean data type, the default value is false.
• readonly: It specifies that the component cannot be edited. It is of the boolean data type, the default value is false.
• emptyMessage: It is used to set the text to display when there is no data. It is of string data type.
• emptyFilterMessage: It is used to set the text to display when filtering does not return any results. It is of string data type.
• ariaLabelledBy: It is the ariaLabelledBy property that establishes relationships between the component and label(s) where its value should be one or more element IDs. It is of string data type, the default value is null.
• editable: It is used to specify the custom value instead of predefined options that can be entered using the editable input field. It is of the boolean data type, the default value is false.
• maxlength: It is used to specify the maximum number of characters allowed in the editable input field, It is of number datatype, and the default value is null.
• appendTo: This property takes the ID of the element on which the overlay is appended to. It accepts any data type, the default value is null.
• tabindex: It is used to set the index of the element in tabbing order. It is of number datatype, the default value is null.
• inputId:  It is an ID identifier of the underlying input element. It is of string data type, the default value is null.
• dataKey: It is a property to uniquely identify a value in options. It is of string data type, the default value is null.
• autofocus: it specifies that the component should automatically focus on load. It is of the boolean data type, the default value is false.
• autofocusFilter: It is used to apply focus to the filter element when the overlay is shown. It is of the boolean data type, the default value is false.
• resetFilterOnHide: It is used to clear the filter value when hiding the dropdown. It is of the boolean data type, the default value is false.
• dropdownIcon: It is used to set the icon class of the dropdown icon. It is of string data type, the default value is pi pi-chevron-down.
• emptyFilterMessage: It is used to set the text to display when filtering does not return any results. It is of string data type.
• autoDisplayFirst: It is used to specify whether to display the first item as the label if no placeholder is defined and the value is null. It is of the boolean data type, and the default value is true.
• group: It is used to specify whether to display options as grouped when nested options are provided. It is of the boolean data type, the default value is false.
• showClear: It is used to show the clear icon which is displayed to clear the value. It is of boolean data type, the default value is false.
• baseZIndex: It is used to set the base index value to use in layering. It is of number datatype, the default value is 0.
• autoZIndex: It is used to specify whether to automatically manage the layering. It is of the boolean data type, and the default value is true.
• showTransitionOptions: It is used to set the Transition options of the show animation. It is of string data type, the default value is .12s cubic-bezier(0, 0, 0.2, 1).
• hideTransitionOptions: It is used to set the transition options of the hide animation. It is of string data type, the default value is .1s linear.
• ariaFilterLabel: It is used to define a string that labels the filter input. It is of string data type, the default value is null.
• tooltip: It is used to show the advisory information to display in a tooltip on hover. It accepts any data type, the default value is null.
• tooltipStyleClass: It is used to set the Style class of the tooltip. It is of string data type, the default value is null.
• tooltipPosition: It is used to set the position of the tooltip, the valid values are right, left, top, and bottom. It is of string data type, the default value is top.
• tooltipPositionStyle: It is used to set the type of CSS position. It is of string data type, the default value is absolute.

Syntax:

<p-dropdown 
    [virtualScroll]="..." 
    [itemSize]="...">
</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

Example1: In the below code, we will be using the above syntax to demonstrate the use of the Form Dropdown Virtual Scrolling Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form Dropdown Virtual Scrolling Component</h4>

    <h5>Virtual Scroll (10000 Items)</h5>
    <p-dropdown
        [options]="gfg"
        [(ngModel)]="item"
        placeholder="Select Item"
        [virtualScroll]="true"
        [itemSize]="31"
        [filter]="true">
      </p-dropdown>
</div>

• 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 {
    gfg: SelectItem[];

    constructor() {
        this.gfg = [];
        for (let i = 0; i < 10000; i++) {
            this.items.push({ label: 'Item ' + i, value: 'Item ' + i });
        }
    }
}

• app.module.ts

Javascript

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

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

export class AppModule { }

• app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

Example2: Below is another code that demonstrates the use of the Form Dropdown Virtual Scrolling Component.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form Dropdown
        Virtual Scrolling Component
    </h4>

    <p-dropdown
      [options]="countries"
      [(ngModel)]="selectedCountry"
      optionLabel="name"
      [filter]="true"
      filterBy="name"
      [showClear]="true"
      placeholder="Select a Country"
      [virtualScroll]="true"
    >
      <ng-template pTemplate="selectedItem">
          <div class="country-item country-item-value"
               *ngIf="selectedCountry">
              <div>{{ selectedCountry.name }}</div>
          </div>
      </ng-template>

      <ng-template let-country pTemplate="item">
          <div class="country-item">
              <div>{{ country.name }}</div>
          </div>
      </ng-template>
    </p-dropdown>
</div>

• app.component.ts

Javascript

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

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

export class AppComponent {
    countries: any[];

    constructor() {
        this.countries = [
            { name: 'India', code: 'IND' },
            { name: 'Brazil', code: 'BR' },
            { name: 'Egypt', code: 'EG' },
            { name: 'France', code: 'FR' },
            { name: 'Germany', code: 'DE' },
            { name: 'Japan', code: 'JP' },
            { name: 'Spain', code: 'ES' },
            { name: 'United States', code: 'US' },
        ];
    }
}

• app.module.ts

Javascript

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

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

export class AppModule { }

• app.component.scss

CSS

:host ::ng-deep .p-dropdown {
    width: 14rem;
}

Output:

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