Angular PrimeNG Form TreeSelect Properties

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 Properties.

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. There are different properties available that can be used to enhance the application, along with increasing user interactivity.

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. The default value is null & it accepts array-type values.
• 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. It accepts the string type & the default value is null.
• 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. It is of boolean type and the default value is true. 
• 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 the 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. It accepts the string type & the default value is undefined.
• 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. 

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: Run the below command to see the output:

ng serve --save

Example 1: The below code demonstrates the use of the Form TreeSelect Properties in Angular PrimeNG.

• app.component.html

HTML

<div style="text-align:center">
    <h2 style="color: green">
          GeeksforGeeks
      </h2>
    <h3>
          Angular PrimeNG Form TreeSelect Properties
      </h3>

    <p-treeSelect [(ngModel)]="selected"
                    selectionMode="single"
                    [options]="nodes"
                    placeholder="Select a Node">
    </p-treeSelect>
</div>

• 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: The below code demonstrates the use of the Form TreeSelect Properties in Angular PrimeNG.

• app.component.html

HTML

<div style="text-align:center">
    <h2 style="color: green">
          GeeksforGeeks
      </h2>
    <h3>
          Angular PrimeNG Form TreeSelect Properties
      </h3>

    <p-treeSelect [(ngModel)]="selected"
                  selectionMode="single"
                  [options]="nodes"
                  placeholder="Select a Node"
                  disabled="true">
    </p-treeSelect>
</div>

• 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:

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