Angular PrimeNG Drag and Drop Component

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: "Sandeep Jain Sir",
                age: 38
            },
            {
                id: "KJHY45",
                name: "Shivangi Goel",
                age: 20
            },
            {
                id: "LKIO34",
                name: "Harshit Khandelwal",
                age: 30
            },
            {
                id: "LPOI21",
                name: "Taranjeet Singh",
                age: 25
            },
            {
                id: "VANI12",
                name: "Vanishka Singh",
                age: 23
            }
        ];
    }

    // 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;
    }
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
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";
import { CardModule } from "primeng/card";

@NgModule({
    imports: [
        CardModule,
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        TableModule,
        ToastModule,
        DragDropModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}

<h1 style="color:green">
    GeeksforGeeks
</h1>
<h3>
    Angular PrimeNG Drag
    and Drop Component
</h3>

<div class="grid">
    <div class="col-12 md:col-6 drag-column">
        <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"
                    (onDragEnd)="dragEnd()">
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div
        pDroppableDisabled="true"
        class="col-12 md:col-6"
        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>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
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";
import { CardModule } from "primeng/card";

@NgModule({
    imports: [
        CardModule,
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,
        FormsModule,
        TableModule,
        ToastModule,
        DragDropModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule {}