Angular PrimeNG PickList Headers

Last Updated : 17 Jan, 2023

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 Headers Component.

The PickList Component is used to reorder items between different categories and lets us pick and select items. It acts as a drag-and-drop component with two tables and contents in it.

Headers: SourceHeader and targetHeader attributes are used to define titles for the lists.

Syntax:

Import the module

import {PickListModule} from 'primeng/picklist';

Use the component.

<p-pickList 
    sourceHeader="...." 
    targetHeader="....">

Angular PrimeNG PickList Headers properties:

Headers: To define the headers, we use sourceHeader and targetHeader attributes.
sourceHeader: This is used for adding a header to the source pickList.
targetHeader: This is used for adding a header to the target 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 Headers using the target Header.

app.component.html:

HTML

<div style="width: 80%;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>Angular PrimeNG PickList Headers</h2> 
    <p-pickList
        ="sourceGeek" 
        [target]="targetGeek" 
        targetHeader="I am a GFG Target List"
        [dragdrop]="true"  
        [responsive]="true" 
        [sourceStyle]="{'height':'500px', 'background-color':'pink'}" 
        [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:

Example 2: Below is the example code that illustrates the use of the Angular PrimeNG PickList Headers using the source Header.

app.component.html:

HTML

<div style="width: 80%;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>Angular PrimeNG PickList Headers</h2> 
    <p-pickList
        ="sourceGeek" 
        [target]="targetGeek" 
        sourceHeader="I am a GFG Source List"
        [dragdrop]="true"  
        [responsive]="true" 
        [sourceStyle]="{'height':'500px', 'background-color':'pink'}" 
        [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 {}