Angular PrimeNG Tree Drag and Drop

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.

Project Structure

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:

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