Drag And Drop To Table Using PrimeNG

In this article, we will learn how to implement drag and drop to table using PrimeNG

Step 1:

Install  PrimeNG  in your project using following command :

npm install primeng –save

npm install primeicons –save

Step 1:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

import { SplitterModule } from 'primeng/splitter';
import { DragDropModule } from 'primeng/dragdrop';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    SplitterModule,
    DragDropModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 2:

app.component.html

<div class="card">
<div class="p-grid">
    <div class="p-col-12 p-md-6 drag-column">
        <div *ngFor="let product of availableProducts">
            <div class="product-item" pDraggable="products" (onDragStart)="dragStart(product)" (onDragEnd)="dragEnd()">
                <div class="image-container">
                        <img src="{{product.product_image}}" [alt]="product.product_title" class="product-image" />
                </div>
                <div class="product-list-detail">
                    <h5 class="p-mb-2">{{product.product_title}}</h5>
                    <i class="pi pi-tag product-category-icon"></i>
                    <span class="product-category">Therichpost</span>
                </div>
                <div class="product-list-action">
                    <h6 class="p-mb-2">{{product.product_price}}</h6>
                    <span class="product-badge status-instock">INSTOCK</span>
                </div>
            </div>
        </div>
    </div>
    <div class="p-col-12 p-md-6 drop-column" pDroppable="products" (onDrop)="drop()">
    <p-table [value]="selectedProducts">
        <ng-template pTemplate="header">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Price</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product>
            <tr>
                    <td>{{product.id}}</td>
                    <td>{{product.product_title}}</td>
                    <td>{{product.product_price}}</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>
</div>

Step 3:

app.component.ts

import { HttpClient } from '@angular/common/http';
export class AppComponent {
 
    availableProducts: Product[];
    
    selectedProducts: Product[];
    
    draggedProduct: Product;
    
    constructor(private productService: ProductService) { }
    ngOnInit() {
    this.http.get('https://www.testjsonapi.com/products/').subscribe(data => {
      //data storing for use in html component
    
      this.products = data;
      this.selectedProducts = [];
      this.availableProducts = this.products
          }, error => console.error(error));
    }
    dragStart(event,product: Product) {
        this.draggedProduct = product;
    }
    
    drop(event) {
        if (this.draggedProduct) {
            let draggedProductIndex = this.findIndex(this.draggedProduct);
            this.selectedProducts = [...this.selectedProducts, this.draggedProduct];
            this.availableProducts = this.availableProducts.filter((val,i) => i!=draggedProductIndex);
            this.draggedProduct = null;
        }
    }
    
    dragEnd(event) {
        this.draggedProduct = null;
    }
    
    findIndex(product: Product) {
        let index = -1;
        for(let i = 0; i < this.availableProducts.length; i++) {
            if (product.id === this.availableProducts[i].id) {
                index = i;
                break;
            }
        }
        return index;
    }
}
export interface Product {
  id?:number;
  code?:string;
  name?:string;
  description?:string;
  price?:number;
  quantity?:number;
  inventoryStatus?:string;
  category?:string;
  image?:string;
  rating?:number;
}

Step 4:

now using below command  we can see the following output:

ng serve