Angular PrimeNG Form TreeSelect Checkbox Component

Angular PrimeNG is an open-source front-end UI framework developed by PrimeTek for developing efficient and scalable angular applications. Using PrimeNG in their projects helps developers to cut down the development time and focus on other important areas of the application. In this article, we will be seeing the Angular PrimeNG Form TreeSelect Checkbox 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 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.

Angular PrimeNG Form TreeSelect Checkbox 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="checkbox" 
    [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:

Project Structure

Example 1: This is a basic example illustrating the use of the checkbox selection in the TreeSelect component.

• app.component.html:

HTML

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

<p-treeSelect
    [(ngModel)]="selected"
    selectionMode="checkbox"
    display="chip"
    [options]="nodes"
    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:

Example 2: In this example, we set the display property of the TreeSelect component to “comma” so the selected items will be separated by a comma.

• app.component.html:

HTML

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

<p-treeSelect
    [(ngModel)]="selected"
    selectionMode="checkbox"
    display="comma"
    [options]="nodes"
    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