Angular PrimeNG Drag and Drop to Table
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" > w3wiki </ 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" > w3wiki </ 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 { } |
Output:
Reference: https://primefaces.org/primeng/dragdrop