Angular PrimeNG Form TreeSelect Multiple 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 Angular PrimeNG Form TreeSelect Multiple 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 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.

Angular PrimeNG Form TreeSelect Multiple Properties:

• options: An array of TreeNodes is passed to this property to display the TreeSelect options.
• metaKeySelection: This property is used to define the behavior of how multiple items will be selected. When set to false the selection of each item can be toggled separately otherwise metaKey needs to be pressed to select/unselect an item. The default value is true.
• selectionMode: It is used to set the selection mode of the TreeSelect. It accepts “single”, “multiple”, and “checkbox” as its values. 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: This property is used to set the placeholder label for the TreeSelect that is shown when no item is selected.

Syntax:

<p-treeSelect 
    [(ngModel)]="..."
    selectionMode="multiple" 
    [options]="..."
    [metaKeySelection]="false" 
    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:

Project Structure

Example 1: This is a basic example demonstrating the use of multiple select in the TreeSelct component.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    TreeSelect Multiple Component
</h3>

<p-treeSelect
    [(ngModel)]="selected"
    selectionMode="multiple"
    [options]="nodes"
    [metaKeySelection]="false"
    placeholder="Select Nodes">
</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: In this example, we set the display property of the TreeSelect component to “chip” so the selected items will be displayed as a chip rather than separated by a comma.

• app.component.html:

HTML

<h2 style="color: green">GeeksforGeeks</h2>
<h3>
    Angular PrimeNG Form
    TreeSelect Multiple Component
</h3>

<p-treeSelect
    [(ngModel)]="selected"
    selectionMode="multiple"
    display="chip"
    [options]="nodes"
    [metaKeySelection]="false"
    placeholder="Select Nodes">
</p-treeSelect>

• app.component.ts:

Javascript

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

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `:host ::ng-deep .p-treeselect{
            width: 300px;
        }`
    ]
})

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 { ChipModule } from 'primeng/chip';
import { TreeSelectModule } from 'primeng/treeselect';

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

Output:

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