Angular PrimeNG Form TreeSelect Component

Last Updated : 27 Mar, 2023

Angular PrimeNG is an open-source library that consists 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 be seeing the Angular PrimeNG Form TreeSelect Component.

The TreeSelect Component allows the users to select items from hierarchical data. It accepts an array of TreeNodes as its options property to show the data.

In the TreeSelect single selection mode, one item from the hierarchy can be selected.

In TreeSelect multiple selection mode, more than one item can be selected and by default, the selected item will be separated by a comma and will be suffixed by an ellipsis when the selected items overflow the TreeSelect component.

In the TreeSelect checkbox selection mode, a checkbox is displayed next to every item and it can be used to select the item and all the items that come under it in the hierarchy.

As alternatives to the selection behavior specified by the selectionMode option, TreeSelects provides “single,” “many,” and “checkbox” options.

By default, chosen items are shown as comma-separated lists, however, an alternative chip mode is available that uses the display property to show the items as tokens.

Syntax:

<p-treeSelect 
    [(ngModel)]="..."
    selectionMode="..." 
    display="..."
    [options]="..." 
    placeholder="..."
</p-treeSelect>

Angular PrimeNG Form TreeSelect Component Properties:

options: This property accepts an array of TreeNodes as its value to display the TreeSelect component.
scrollHeight: If the height of the list is more than the viewport’s height, a scrollbar is defined. It is of string type and the default value is 400px.
placeholder: The placeholder property is used to set the placeholder to display when no items are selected.
disabled: It indicates that the component should be deactivated if it is present. It is of boolean type and the default value is false.
tabindex: It is the element’s index in the tab order. It is of string type and the default value is null.
inputId: It is the underlying input element’s identifier. It is of string type and the default value is null.
ariaLabelledBy: It creates connections between the component and label(s), with the value of the attribute being one or more element IDs. It is of string type and the default value is null.
selectionMode: This property is used to set the selection mode of the TreeSelect Component. The accepted values are “single”, “multiple”, and “checkbox”. The default value is “single”.
panelClass: It is of the overlay panel’s style class. It is of string type and the default value is null.
appendTo: It is used to indicate where the overlay is applied, and provide a valid query selector or an HTMLElement. “Body” stands for the body of the document, while “self” stands for the element itself.
emptyMessage: It is used when there are no selections, the text will be displayed. Value from the PrimeVue locale setup is used by default.
display: This property defines how the selected item(s) will be displayed. The accepted values are “comma” and “chip”. The default value is “chip”.
propagateSelectionUp: It is used to check whether choices made in checkboxes are passed on to ancestor nodes. It is of boolean type and the default value is true.
propagateSelectionDown: It is used to check whether checkbox choices are passed on to child nodes. It is of boolean type and the default value is true.
metaKeySelection: Specifies how several items can be chosen. When true, the metaKey must be hit in order to choose or deselect an item, whereas false allows for independent selection of each item. MetaKeySelection has switched off automatically on touch-enabled devices.
filter: It provides an input area to filter the items when specified. It is of boolean type and the default value is false.
filterBy: It selects the field or fields (comma separated) to search against when filtering is enabled. It is of string type and the default value is label.
filterMode: “Lenient” and “strict” filtering modes are available for valid values. It is of string type and the default value is lenient.
filterPlaceholder: When the filter input is blank, placeholder text will display. It is of string type and the default value is null.
filterLocale: Filtering locale to be used. The current locale of the host environment serves as the default locale.
resetFilterOnHide: It removes the filter value when the dropdown is hidden. It is of boolean type and the default value is true.
showClear: A clear icon is shown to clear the value when it is enabled. It is of boolean type and the default value is false.

Angular PrimeNG Form TreeSelect Component Events:

onShow: When the overlay is shown, a callback is triggered.
onHide: When the overlay is hidden, a callback is triggered.
onFilter: When the data is filtered, a callback is triggered.
onNodeSelect: When the node is selected, a callback is triggered.
onNodeUnselect: When the node is unselected, a callback is triggered.
onNodeExpand: When the node is expanded, a callback is triggered.
onNodeCollapse: When the node is collapsed, a callback is triggered.
onClear: When an input field is cleared, a callback is triggered.

Angular PrimeNG Form TreeSelect Component Templates:

value: It is the component’s value.
header: It is the component’s value. The options are TreeNode options.
footer: It is the component’s value. The options are TreeNode options.

Angular PrimeNG Form TreeSelect Component Styling:

p-treeselect: It is a container element.
p-treeselect-label-container: Label container used to display particular goods.
p-treeselect-label: It is a label to show the chosen items.
p-treeselect-trigger: It is the dropdown button.
p-treeselect-panel: It is the items overlay panel.
p-treeselect-items-wrapper: It is a list of the things.

Creating Angular Application and Installing the Module:

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: Finally, Install PrimeNG in your given directory.

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

Project Structure: The project Structure will look like this after following the above steps:

Steps to run the application: To run the above file run the below command:

ng serve --save

Example 1: Below is the example that illustrates the use of Angular PrimeNG Form TreeSelect Component.

app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    TreeSelect Single Component
</h3>
 
<p-treeSelect
    [(ngModel)]="selected"
    selectionMode="single"
    [options]="nodes"
    placeholder="Select a Node">
</p-treeSelect>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
 
export class AppComponent {
    nodes: TreeNode[] = [];
    selected: any;
    ngOnInit()
    {
        this.nodes = [
            {
                "label": "Work",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "data.json",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "sales.docx",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "presentation.pptx",
                        "icon": "pi pi-file"
                    }
                ]
            },
            {
                "label": "Home",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "grocery.word",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "picture.jpeg",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "homeplan.png",
                        "icon": "pi pi-file"
                    }
                ]
            },
            {
                "label": "Multimedia",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "infinity-war.mp4",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "you.mp3",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "endgame.mp4",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "MI.mp4",
                        "icon": "pi pi-file"
                    }
                ]
            }
        ];
    }
}

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 { FormsModule } from '@angular/forms';
import { TreeSelectModule } from 'primeng/treeselect';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }

Output:

Example 2: Below is another example that illustrates the use of Angular PrimeNG Form TreeSelect Component.

app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    TreeSelect Single Component
</h3>
 
<p-treeSelect
    [(ngModel)]="selected"
    [filter]="true"
    [options]="nodes"
    placeholder="Select a Node">
</p-treeSelect>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
})
 
export class AppComponent {
    nodes: TreeNode[] = [];
    selected: any;
    ngOnInit()
    {
        this.nodes = [
            {
                "label": "Work",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "data.json",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "sales.docx",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "presentation.pptx",
                        "icon": "pi pi-file"
                    }
                ]
            },
            {
                "label": "Home",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "grocery.word",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "picture.jpeg",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "homeplan.png",
                        "icon": "pi pi-file"
                    }
                ]
            },
            {
                "label": "Multimedia",
                "icon": "pi pi-folder",
                "children": [
                    {
                        "label": "infinity-war.mp4",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "you.mp3",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "endgame.mp4",
                        "icon": "pi pi-file"
                    },
                    {
                        "label": "MI.mp4",
                        "icon": "pi pi-file"
                    }
                ]
            }
        ];
    }
}

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 { FormsModule } from '@angular/forms';
import { TreeSelectModule } from 'primeng/treeselect';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeSelectModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
 
export class AppModule { }