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:

• app.component.ts:

• app.module.ts:

Output:

 

Example 2: In this example, we will learn about p-virtualscroller-header and p-virtualscroller-footer.

• app.component.html:

• app.component.ts:

• app.module.ts:

Output:

 

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

17bcs5e9h

Follow

Improve

Article Tags :

• AngularJS
• Technical Scripter
• Web Technologies
• Angular-PrimeNG
• PrimeNG-Data
• Technical Scripter 2022

+2 More