Angular PrimeNG Tree Properties

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 are going to learn Angular PrimeNG Tree Properties. 

Angular PrimeNG Tree is used to display hierarchical data as a tree. The properties are used to perform different actions on the tree so that we can display data accordingly.

• value(array): It is an array of treenodes.
• selectionMode(string): It defines the selection mode, valid values single, multiple, and checkbox.
• selection(any): It is a single treenode instance or an array to refer to the selections.
• style(string): It is the inline style of the component.
• styleClass(string): It is the style class of the component.
• contextMenu(ContextMenu): It is the context menu instance.
• layout(string): It defines the orientation of the tree, valid values are vertical and horizontal. The default value is vertical.
• draggableScope(string/array): It is the scope of the draggable nodes to match a droppableScope.
• droppableScope(string/array): It is the scope of the droppable nodes to match a draggableScope.
• draggableNodes(boolean): It checks whether the nodes are draggable. The default value is false.
• droppableNodes(boolean): It checks whether the nodes are droppable. The default value is false.
• metaKeySelection(boolean): It defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to a false selection each item can be toggled individually. The default value is true.
• propagateSelectionUp(boolean): It checks whether checkbox selections propagate to ancestor nodes. The default value is true.
• propagateSelectionDown(boolean): It checks whether checkbox selections propagate to descendant nodes. The default value is true.
• loading(boolean): It displays a loader to indicate data load is in progress. The default value is false.
• loadingIcon(string): It shows the loader while indicating data load is in progress. The default value is pi pi-spinner.
• emptyMessage(string): It shows no records found text to display when there is no data.
• ariaLabel(string): It is used to define a string that labels the tree.
• ariaLabelledBy(string): It establishes relationships between the component and label(s) where its value should be one or more element IDs.
• togglerAriaLabel(string): It defines a string that labels the toggler icon for accessibility.
• validateDrop(boolean): If set to true, the drop can be accepted or rejected based on the condition defined at onNodeDrop. The default value is false.
• filter(boolean): If set to true, displays an input field to filter the items. The default value is false.
• filterBy(string): It decides which field or fields to search against.
• filterMode(string): It is the mode for filtering valid values that are lenient and strict. The default is lenient.
• filterPlaceholder(string): It is the placeholder text to show when the filter input is empty.
• filterLocale(string): It is the locale to use in filtering. The default locale is the host environment’s current locale.
• scrollHeight(string): It is the height of the scrollable viewport.
• virtualScroll(boolean): If set to true, the data should be loaded on demand during the scroll. The default value is false.
• virtualScrollItemSize(number): It sets the height of an item in the list for VirtualScrolling.
• virtualScrollOptions(ScrollerOptions):  It sets the scroller feature
• trackBy(Function): It sets the function to optimize the node list rendering.

Syntax: To use any property, use the following syntax:

<p-tree [value]="files1"
    selectionMode="checkbox">
</p-tree>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

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

cd geeks_angular

Step 3: 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: In the following example, we have simple TreeNodes with checkbox enabled

app.component.html

HTML

<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Properties</h3>
<p-tree [value]="files1"
        selectionMode="checkbox">
</p-tree>

app.component.ts

Javascript

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

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

    files2: TreeNode[] = [];

    ngOnInit() {
        this.files1 = [
            {
                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',
                    },
                ],
            },
        ];
        this.files2 = this.files1;
    }
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from
    '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([{ path: '', component: AppComponent }]),
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

Example 2: In the following example, we have enabled. the filter mode.

app.component.html

HTML

<h1 style="color:green;text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Properties</h3>
<p-tree [value]="files1"
        filter="true">
</p-tree>

app.component.ts

Javascript

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

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

    files2: TreeNode[] = [];

    ngOnInit() {
        this.files1 = [
            {
                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',
                    },
                ],
            },
        ];
        this.files2 = this.files1;
    }
}

app.module.ts

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        HttpClientModule,
        FormsModule,
        RouterModule.forRoot([{ path: '', component: AppComponent }]),
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Output:

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