Angular PrimeNG Tree 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. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG Tree Component.

The Tree component is used to show hierarchical data. Angular provides a lot of customization in the form of properties, styles, templates, etc. that we can use to modify the tree according to our needs. 

• Tree Templating: By default, a tree node is displayed inside a tree node. We can customize it by defining a custom pTemplate that gets the treenode as an implicit variable.
• Tree Selection: The Tree supports three selections:- single, multiple, and checkbox. The default value is single and can be enabled by selectionMode and passing a single or an array of treenodes. 
• Tree Filter: The filtering in the Tree component is enabled by setting the filter to true. By default, the label of the tree node is compared against the filter value. We can customize which field(s) should be used during the search to define the filterBy property.
• Tree Lazy: Lazy loading is used to load large datasets. Also instead of loading the whole tree, nodes can be loaded at the onNodeExpand event. 
• Tree Scroll: The scrolling is used to preserve space as the content of the tree is dynamic. It is enabled by the scrollHeight property.
• Tree ContextMenu: The tree has exclusive integration with the context menu created by binding a menu instance to the tree.
• Tree DragDrop: The Tree nodes can be reordered within a tree and also can be transferred between multiple trees. The dragging can be enabled by setting draggableNodes to true and allowing dropping to enable the droppableNodes property.
• Tree Horizontal: The Tree orientation can be changed to horizontal.
• Properties: There are various properties that are used for the Tree Component, in order to include some features.
• Methods: The different methods are provided by Angular PrimeNG, which can be used to reset, filter, scroll to a specific position, etc, to the Tree Component.
• Events: This component facilitates the inclusion of the different functionalities in the Tree Component.
• Styles: This component helps to add different stylings to enhance the overall user experience of the Tree Component.
• Templates: Angular PrimeNG provides different templates to enhance the user experience.

Syntax: Create a Tree component as follows

• Import the Tree component module

import {TreeModule} from 'primeng/tree';
import {TreeNode} from 'primeng/api';

• The implementation is as follows:

<p-tree [value]="files"></p-tree>

Creating Angular application & Module Installation:

• Create an Angular application using the following command.

ng new geeks_angular

• After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

• Install PrimeNG in your given directory.

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

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

• Steps to run the application: Write the below command to run the application:

ng serve --open

Example 1: This example describes the basic usage of the Tree Component in Angular PrimeNG.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Component</h3>
<p-tree [value]="data">
    <ng-template pTemplate="header">
        <h3>Tutorials available</h3>
      </ng-template>
</p-tree>

• app.component.ts

Javascript

import { Component, OnInit, ViewChild } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    data: TreeNode[];
    cols: any[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.data = [
            {
                label: 'Data Structures',
                icon: 'pi pi-folder',

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

                        children: [
                            {
                                label: 'Singly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Circularly List',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                    {
                        label: 'Queue',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'Simple Queue',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly ended Queue',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Algorithms',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Greedy ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'BFS ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'Dynamic Programming',
                        icon: 'pi pi-code',
                    },
                ],
            },
        ];
    }
}

• app.module.ts

Javascript

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

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

Output:

Example 2: In the following example, when a node is selected, the toast is shown using the onNodeSelect event.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
  GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Component</h3>
<p-tree [value]="data"
          selectionMode="single"
          (onNodeSelect)="handleClick($event)">
</p-tree>
<p-toast position="top-left"></p-toast>

• app.component.ts

Javascript

import { Component, OnInit, ViewChild } from '@angular/core';

import { TreeNode } from 'primeng/api';
import { TreeTable } from 'primeng/treetable';
import { MessageService } from 'primeng/api';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
export class AppComponent {
    data: TreeNode[];
    cols: any[];

    constructor(private messageService: MessageService) { }

    ngOnInit() {
        this.cols = [
            { field: 'name', header: 'First Name' },
            { field: 'age', header: 'Age' },
        ];
        this.data = [
            {
                label: 'Data Structures',
                icon: 'pi pi-folder',

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

                        children: [
                            {
                                label: 'Singly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly List',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Circularly List',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                    {
                        label: 'Queue',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'Simple Queue',
                                icon: 'pi pi-code',
                            },
                            {
                                label: 'Doubly ended Queue',
                                icon: 'pi pi-code',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Algorithms',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Greedy ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'BFS ',
                        icon: 'pi pi-code',
                    },
                    {
                        label: 'Dynamic Programming',
                        icon: 'pi pi-code',
                    },
                ],
            },
        ];
    }
    handleClick(event: any) {
        this.messageService.add({
            severity: 'success',
            summary: 'Sorted Column',
            detail: 'Welcome to GeeksforGeeks',
        });
    }
}

• app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { TreeModule } from 'primeng/tree';
import { ToastModule } from 'primeng/toast';
import { RippleModule } from 'primeng/ripple';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeModule,

    ToastModule,
    RippleModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

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