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 { } |
Output:
Reference: https://primefaces.org/primeng/dragdrop