Angular PrimeNG Tree Drag and Drop

Last Updated : 21 May, 2024

Angular PrimeNG is an open-source framework with a rich set 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 see Angular PrimeNG Tree Drag and Drop.

The tree component is used to hierarchical data to the user. The nodes of a tree can be reordered and can also be transferred to another tree. Dragging from a tree can be enabled by setting the draggableNodes property of the tree to true and dropping by setting the droppableNodes property to true. Tree Drag and Drop needs TreeDragDropService configured as the provider.

Syntax:

<p-tree 
    [value]="..."
    [draggableNodes]="true"
    [droppableNodes]="true">
</p-tree>

Creating Angular application and Installing the Modules:

Step 1: Create an Angular application using the following command.

ng new myapp

Step 2: After creating your project folder i.e. myapp, move to it using the following command.

cd myapp

Step 3: Install PrimeNG in your given directory.

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

Project Structure: After completing the above steps the project structure will look like the following.

Example 1: In this example, we enabled drag and drop in a tree using the draggableNodes and droppableNodes properties.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Tree Drag and Drop</h4>

    <p-tree 
        [value]="nodes"
        [draggableNodes]="true"
        [droppableNodes]="true">
    </p-tree>
</div>

app.component.ts

import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { NodeService } from './nodeservice';
import { TreeDragDropService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [TreeDragDropService]
})

export class AppComponent {
    constructor(private nodeService: NodeService) { }
    nodes: TreeNode[] = [];

    ngOnInit() {
        
        this.nodes = [
            {
                label: 'Files',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Office',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'MS Excel',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'MS Word',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'Home',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'Movies',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Docs',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Academic',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'Loans',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'Investments',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule }
    from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        HttpClientModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }

Output:

Example 2: In this example, we drag and drop nodes from one tree to another.

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h4>Angular PrimeNG Tree Drag and Drop</h4>

    <p>First Tree:</p>
    <p-tree 
        [value]="nodes"
        [draggableNodes]="true"
        [droppableNodes]="true">
    </p-tree>

    <p class="mt-5">Second Tree:</p>
    <p-tree 
        [value]="nodes2"
        [draggableNodes]="true"
        [droppableNodes]="true">
    </p-tree>
</div>

app.component.ts

import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
import { NodeService } from './nodeservice';
import { TreeDragDropService } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [TreeDragDropService]
})

export class AppComponent {
    constructor(private nodeService: NodeService) { }
    nodes: TreeNode[] = [];
    nodes2: TreeNode[] = [];

    ngOnInit() {
        
        this.nodes = [
            {
                label: 'Files',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Office',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'MS Excel',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'MS Word',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'Home',
                        icon: 'pi pi-folder',

                        children: [
                            {
                                label: 'Movies',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'Docs',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Academic',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'Loans',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'Investments',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];


        this.nodes2 = [
            {
                label: 'Topics',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'Graphs',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'Linked List',
                        icon: 'pi pi-folder',
                    },
                ],
            },
            {
                label: 'Courses',
                icon: 'pi pi-folder',

                children: [
                    {
                        label: 'DSA',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'GATE',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'DBMS',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule }
    from '@angular/common/http';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        HttpClientModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }

Output:

Angular PrimeNG Drag and Drop Component

writer01

Improve

Article Tags :

Angular PrimeNG Tree Drag and Drop

Similar Reads

Thank You!

What kind of Experience do you want to share?