Angular PrimeNG Drag and Drop to Table

Last Updated : 02 Feb, 2023

Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see how to use the Drag and Drop to Table in Angular PrimeNG.

Angular PrimeNG Drag and Drop to Table: The Drag and Drop (pDraggable and pDroppable) directives can be utilized to implement the drag and drop behavior for any element.

Syntax:

<div pDraggable="pnl"  dragHandle="...">
    ...
</div>

Creating Angular application & module installation:

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: Install PrimeNG in your given directory.

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

Project Structure: It will look like the following:

Example 1: In this article, we will learn about Angular PrimeNG Drag and Drop to Table

app.component.html

HTML

<div> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h2> 
        Angular PrimeNG Drag and Drop to Table 
    </h2> 
    <div class="row"> 
        <div class="col-4"> 
            <p-table [value]="available"  
                     responsiveLayout="scroll"> 
                <ng-template pTemplate="header"> 
                    <tr> 
                        <th>Name</th> 
                        <th>Age</th> 
                    </tr> 
                </ng-template> 
                <ng-template pTemplate="body" let-person> 
                    <tr pDraggable="products" 
                        (onDragStart)="dragStart(person);"  
                        (onDrag)="drag()"  
                        (onDragEnd)="dragEnd()"> 
                        <td> 
                            {{person.name}} 
                        </td> 
                        <td> 
                            {{person.age}} 
                        </td> 
                    </tr> 
                </ng-template> 
            </p-table> 
        </div> 
  
        <div class="col-4" 
             pDroppable="products" 
             (onDrop)="drop()"  
             responsiveLayout="scroll"> 
  
            <p-table [value]="selected"> 
                <ng-template pTemplate="header"> 
                    <tr> 
                        <th>Name</th> 
                        <th>Age</th> 
                    </tr> 
                </ng-template> 
                <ng-template pTemplate="body" let-person> 
                    <tr> 
                        <td> 
                            {{person.name}} 
                        </td> 
                        <td> 
                            {{person.age}} 
                        </td> 
                    </tr> 
                </ng-template> 
            </p-table> 
        </div> 
    </div> 
</div>

app.component.ts

Javascript

import { Component } from '@angular/core'; 
import { MessageService } from 'primeng/api'; 
  
interface Person { 
    id: String; 
    name: String, 
    age: number, 
} 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [MessageService] 
}) 
export class AppComponent { 
    constructor(private msg: MessageService) { } 
    available: Person[] = []; 
    selected: Person[] = []; 
  
    currentlyDragging: Person | null = null; 
  
    ngOnInit() { 
        this.available = [ 
            { 
                id: "ASDF12", 
                name: "Anshu", 
                age: 19 
            }, 
            { 
                id: "KJHY45", 
                name: "Shikhar", 
                age: 22 
            }, 
            { 
                id: "LKIO34", 
                name: "Jayant", 
                age: 32 
            }, 
            { 
                id: "LPOI21", 
                name: "Krishna", 
                age: 23 
            }, 
            { 
                id: "VANI12", 
                name: "Vanishka", 
                age: 20 
            } 
        ]; 
    } 
  
    // On Drag Start 
    dragStart(person: Person) { 
        this.currentlyDragging = person; 
  
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "info", 
            summary: "Drag Started", 
            detail: "onDragStart Event"
        }) 
    } 
  
    drag() { 
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "success", 
            summary: "Dragging...", 
            detail: "onDrag Event"
        }) 
    } 
  
    // On Drag End 
    dragEnd() { 
        this.currentlyDragging = null; 
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "error", 
            summary: "Drag End", 
            detail: "onDragEnd Event"
        }) 
    } 
  
    // On Drop of Item to droppable area 
    drop() { 
        if (this.currentlyDragging) { 
            let currentlyDraggingIndex = 
                this.findIndex(this.currentlyDragging); 
            this.selected = 
                [...this.selected, this.currentlyDragging]; 
            this.available = 
                this.available.filter((val, i) => i != 
                    currentlyDraggingIndex); 
            this.currentlyDragging = null; 
        } 
    } 
  
    // Find the Index of a Person 
    findIndex(person: Person) { 
        let index = -1; 
        for (let i = 0; i < this.available.length; i++) { 
            if (person.id === this.available[i].id) { 
                index = i; 
                break; 
            } 
        } 
        return index; 
    } 
}

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 { TableModule } from 'primeng/table'; 
import { DragDropModule }  
    from 'primeng/dragdrop'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        TableModule, 
        DragDropModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }

Output:

Example 2: In this example, we will see toasts when drag-drop-to-table events occur.

app.component.html

HTML

<div> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h2> 
        Angular PrimeNG Drag and Drop to Table 
    </h2> 
    <div class="row"> 
        <div class="col-4"> 
            <p-table [value]="available"  
                     responsiveLayout="scroll"> 
                <ng-template pTemplate="header"> 
                    <tr> 
                        <th>Name</th> 
                        <th>Age</th> 
                    </tr> 
                </ng-template> 
                <ng-template pTemplate="body" let-person> 
                    <tr pDraggable="products" 
                        (onDragStart)="dragStart(person);" 
                        (onDrag)="drag()"  
                        (onDragEnd)="dragEnd()"> 
                        <td>{{person.name}}</td> 
                        <td>{{person.age}}</td> 
                    </tr> 
                </ng-template> 
            </p-table> 
        </div> 
  
        <div class="col-4" 
             pDroppable="products" 
             (onDrop)="drop()"  
             responsiveLayout="scroll"> 
  
            <p-table [value]="selected"> 
                <ng-template pTemplate="header"> 
                    <tr> 
                        <th>Name</th> 
                        <th>Age</th> 
                    </tr> 
                </ng-template> 
                <ng-template pTemplate="body" let-person> 
                    <tr> 
                        <td>{{person.name}}</td> 
                        <td>{{person.age}}</td> 
                    </tr> 
                </ng-template> 
            </p-table> 
        </div> 
    </div> 
    <p-toast [preventOpenDuplicates]="true"></p-toast> 
</div>

app.component.ts

Javascript

import { Component } from '@angular/core'; 
import { MessageService } from 'primeng/api'; 
  
interface Person { 
    id: String; 
    name: String, 
    age: number, 
} 
  
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    providers: [MessageService] 
}) 
export class AppComponent { 
    constructor(private msg: MessageService) { } 
    available: Person[] = []; 
    selected: Person[] = []; 
  
    currentlyDragging: Person | null = null; 
  
    ngOnInit() { 
        this.available = [ 
            { 
                id: "ASDF12", 
                name: "Anshu", 
                age: 19 
            }, 
            { 
                id: "KJHY45", 
                name: "Shikhar", 
                age: 22 
            }, 
            { 
                id: "LKIO34", 
                name: "Jayant", 
                age: 32 
            }, 
            { 
                id: "LPOI21", 
                name: "Krishna", 
                age: 23 
            }, 
            { 
                id: "VANI12", 
                name: "Vanishka", 
                age: 20 
            } 
        ]; 
    } 
  
    // On Drag Start 
    dragStart(person: Person) { 
        this.currentlyDragging = person; 
  
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "info", 
            summary: "Drag Started", 
            detail: "onDragStart Event"
        }) 
    } 
  
    drag() { 
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "success", 
            summary: "Dragging...", 
            detail: "onDrag Event"
        }) 
    } 
  
    // On Drag End 
    dragEnd() { 
        this.currentlyDragging = null; 
        // Show the toast message on the frontend 
        this.msg.add({ 
            severity: "error", 
            summary: "Drag End", 
            detail: "onDragEnd Event"
        }) 
    } 
  
    // On Drop of Item to droppable area 
    drop() { 
        if (this.currentlyDragging) { 
            let currentlyDraggingIndex = 
                this.findIndex(this.currentlyDragging); 
            this.selected = 
                [...this.selected, this.currentlyDragging]; 
            this.available = 
                this.available.filter((val, i) => i != 
                    currentlyDraggingIndex); 
            this.currentlyDragging = null; 
        } 
    } 
  
    // Find the Index of a Person 
    findIndex(person: Person) { 
        let index = -1; 
        for (let i = 0; i < this.available.length; i++) { 
            if (person.id === this.available[i].id) { 
                index = i; 
                break; 
            } 
        } 
        return index; 
    } 
}

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 { TableModule } from 'primeng/table'; 
import { ToastModule } from 'primeng/toast'; 
import { DragDropModule } from 'primeng/dragdrop'; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        FormsModule, 
        TableModule, 
        ToastModule, 
        DragDropModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { }