Angular PrimeNG PickList DragDrop

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. In this article, we will see the Angular PrimeNG PickList DragDrop Component.

The PickList Component is used to reorder items between different lists.

DragDrop: Items can be reordered using drag and drop by enabling dragdrop property.

Syntax:

<p-pickList 
    ="...."
    [target]="..."
    [dragdrop]="true">
</p-pickList>

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
npm install @angular/cdk --save

Project Structure: It will look like the following:

Steps to run the application: Run the below command to see the output

ng serve --open

Example 1: Below is the example code that illustrates the use of the Angular PrimeNG PickList DragDrop, In this example, we will create a PickList and enable dragdrop. We need to create an interface for creating an object of Product type.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Angular PrimeNG PickList Drag Drop</h2>
    <p-pickList
        ="sourceGeek"
        [target]="targetGeek"
        targetHeader="I am a GFG Target List"
        [dragdrop]="true"
        sourceHeader="I am a GFG Source List"
        [responsive]="true"
        [sourceStyle]="{'height':'500px'}"
        [targetStyle]="{'height':'500px','background-color':'yellow'}">
        <ng-template let-geek pTemplate="item">
            <div style="background-color: green; color: white;">
                <div>
                    <h5>{{geek.name}}</h5>
                    <img [src]="geek.image" width="48" />
                </div>
                <div>
                    <h6>Rs  {{geek.price}}</h6>
                </div>
            </div>
        </ng-template>
    </p-pickList>
</div>

• app.component.ts:

Code block

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { PickListModule } from "primeng/picklist";

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, PickListModule],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Example 2:  Below is another example code that illustrates the use of the Angular PrimeNG PickList DragDrop. In this example, we will learn to sourceFilters and targetFilters along with dragdrop.

• app.component.html:

HTML

<div style="width: 80%;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>Angular PrimeNG PickList Drag Drop</h2>
    <p-pickList
        ="sourceGeek"
        [target]="targetGeek"
        targetHeader="I am a GFG Target List"
        [dragdrop]="true"
        sourceHeader="I am a GFG Source List"
        filterBy="description"
        sourceFilterPlaceholder="Search by description"
        targetFilterPlaceholder="Search by description"
        [responsive]="true"
        [sourceStyle]="{'height':'500px'}"
        [targetStyle]="{'height':'500px','background-color':'yellow'}">
        <ng-template let-geek pTemplate="item">
            <div style="background-color: green; color: white;">
                <div>
                    <h5>{{geek.name}}</h5>
                    <img [src]="geek.image" width="48" />
                </div>
                <div>
                    <h6>Rs  {{geek.price}}</h6>
                </div>
            </div>
        </ng-template>
    </p-pickList>
</div>

• app.component.ts:

Javascript

import { Component } from "@angular/core";

export interface Geek {
    id?:string;
    code?:string;
    name?:string;
    description?:string;
    price?:number;
    image?:string;
}

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})

export class AppComponent {
    data: Geek[] = [
        {
            id: "1000",
            code: "GFG111",
            name: "JAVA",
            description: "Programming language",
            image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png",
            price: 6500
        },
        {
            id: "1001",
            code: "GFG555",
            name: "Angular JS",
            description: "Front End Development",
            image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png",
            price: 700
        },
        {
            id: "1002",
            code: "GFG777",
            name: "CSS",
            description: "Style Sheet",
            image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png",
            price: 2900
        },
        {
            id: "1003",
            code: "GFG999",
            name: "HTML",
            description: "HTML Development",
            image:
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png",
            price: 3100
        }
    ];

    sourceGeek: Geek[] = this.data;
    targetGeek: Geek[] = [];
}

• app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { PickListModule } from "primeng/picklist";

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, PickListModule],
    providers: [],
    bootstrap: [AppComponent]
})

export class AppModule {}

Output:

Reference: http://primefaces.org/primeng/picklist