Angular PrimeNG Tree Virtual Scrolling

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 Tree Virtual Scrolling in Angular PrimeNG.

Angular PrimeNG Tree Virtual Scrolling is used to enable virtual scroll in the Tree component. VirtualScroller is an efficient approach to handling data effectively.

Syntax:

<p-tree [value]="..." 
    [virtualScroll]="true" 
    [virtualScrollItemSize]="...." 
    scrollHeight="...px">
</p-tree>

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:

Project Structure

Example 1: Below is a simple example demonstrating the use of the Angular PrimeNG TreeTable Virtual Scrolling.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tree Virtual Scrolling</h4>
<p-tree
    [value]="files1"
    [virtualScroll]="true"
    [virtualScrollItemSize]="40"
    scrollHeight="200px">
</p-tree>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];

    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.files1 = [
            { label: 'Z', icon: 'pi pi-folder' },
            { label: 'A', icon: 'pi pi-folder' },
            { label: 'D', icon: 'pi pi-folder' },
            { label: 'C', icon: 'pi pi-folder' },
            { label: 'W', icon: 'pi pi-folder' },
            { label: 'E', icon: 'pi pi-folder' },
            { label: 'R', icon: 'pi pi-folder' },
            { label: 'G', icon: 'pi pi-folder' },
            { label: 'K', icon: 'pi pi-folder' },

            {
                label: 'A',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { VirtualScrollerModule }
    from 'primeng/virtualscroller';

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

Output:

Example 2: Below is another example demonstrating the use of the Angular PrimeNG TreeTable Virtual Scrolling.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tree Virtual Scrolling</h4>
<p-tree
    [value]="files1"
    [virtualScroll]="true"
    [virtualScrollItemSize]="40"
    scrollHeight="200px">
</p-tree>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];

    constructor(private nodeService: NodeService) { }

    ngOnInit() {
        this.files1 = [
            {
                label: 'Z',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'A',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'D',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'C',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'W',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'E',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'R',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            { label: 'G', icon: 'pi pi-folder' },
            { label: 'K', icon: 'pi pi-folder' },

            {
                label: 'A',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'B',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
import { VirtualScroller, VirtualScrollerModule }
    from 'primeng/virtualscroller';

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

Output:

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