Angular PrimeNG Form TreeSelect Selection Mode Component

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 Form TreeSelect Selection Mode Component in 

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 the TreeSelect multiple selection mode, multiple items from the hierarchy can be selected.

Angular PrimeNG Form TreeSelect Selection Mode Properties:

• options: This property accepts an array of TreeNodes as its value to display the TreeSelect component.
• 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”.
• display: This property defines how the selected item(s) will be displayed. The accepted values are “comma” and “chip”. The default value is “chip”.
• placeholder: The placeholder property is used to set the placeholder to display when no items are selected.

Syntax:

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

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:

Example1: In the below code, we will be using the above syntax to demonstrate the use of the Form TreeSelect Selection Mode Component using single selection mode.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form TreeSelect
          Selection Mode Component
      </h4>
    <p-treeSelect
        [(ngModel)]="selectedNode"
        [options]="gfg"
        selectionMode="single"
        placeholder="Select any item geek...">
    </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 {
    gfg: TreeNode[] = [];
    ngOnInit()
    {
        this.gfg = [
            {
                "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 { TreeSelectModule } from 'primeng/treeselect';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {FormsModule} from '@angular/forms';
import { NodeService } from './nodeservice';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        PanelModule,
        FormsModule,
        HttpClientModule,
        TreeSelectModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    providers: [ NodeService ]
})

export class AppModule { }

Output:

Example2: Below is another code example that demonstrates the use of the Form TreeSelect Selection Mode Component using multiple selection modes.

• app.component.html

HTML

<div style="text-align:center;">
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form TreeSelect
          Selection Mode Component
      </h4>
    <p-treeSelect
        [options]="gfg"
        selectionMode="multiple"
        [metaKeySelection]="false"
        placeholder="Select any item geek...">
    </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 {
    gfg: TreeNode[] = [];
    ngOnInit()
    {
        this.gfg = [
            {
                "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 { TreeSelectModule } from 'primeng/treeselect';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {FormsModule} from '@angular/forms';
import { NodeService } from './nodeservice';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        PanelModule,
        FormsModule,
        HttpClientModule,
        TreeSelectModule
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ],
    providers: [ NodeService ]
})

export class AppModule { }

Output:

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