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
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 >
|
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
}
];
}
dragStart(person: Person) {
this .currentlyDragging = person;
this .msg.add({
severity: "info" ,
summary: "Drag Started" ,
detail: "onDragStart Event"
})
}
drag() {
this .msg.add({
severity: "success" ,
summary: "Dragging..." ,
detail: "onDrag Event"
})
}
dragEnd() {
this .currentlyDragging = null ;
this .msg.add({
severity: "error" ,
summary: "Drag End" ,
detail: "onDragEnd Event"
})
}
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 ;
}
}
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;
}
}
|
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.
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 >
|
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
}
];
}
dragStart(person: Person) {
this .currentlyDragging = person;
this .msg.add({
severity: "info" ,
summary: "Drag Started" ,
detail: "onDragStart Event"
})
}
drag() {
this .msg.add({
severity: "success" ,
summary: "Dragging..." ,
detail: "onDrag Event"
})
}
dragEnd() {
this .currentlyDragging = null ;
this .msg.add({
severity: "error" ,
summary: "Drag End" ,
detail: "onDragEnd Event"
})
}
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 ;
}
}
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;
}
}
|
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...