Open In App

Angular PrimeNG PickList Headers

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 {PickListModule} from 'primeng/picklist';
<p-pickList 
    sourceHeader="...." 
    targetHeader="....">

Angular PrimeNG PickList Headers properties:

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.




<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>




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:
            price: 6500
        },
        {
            id: "1001",
            code: "GFG555",
            name: "Angular JS",
            description: "Front End Development",
            image:
            price: 700
        },
        {
            id: "1002",
            code: "GFG777",
            name: "CSS",
            description: "Style Sheet",
            image:
            price: 2900
        },
        {
            id: "1003",
            code: "GFG999",
            name: "HTML",
            description: "HTML Development",
            image:
            price: 3100
        }
    ];
  
    sourceGeek: Geek[] = this.data;
    targetGeek: Geek[] = [];
}




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.




<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>




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:
            price: 6500
        },
        {
            id: "1001",
            code: "GFG555",
            name: "Angular JS",
            description: "Front End Development",
            image:
            price: 700
        },
        {
            id: "1002",
            code: "GFG777",
            name: "CSS",
            description: "Style Sheet",
            image:
            price: 2900
        },
        {
            id: "1003",
            code: "GFG999",
            name: "HTML",
            description: "HTML Development",
            image:
            price: 3100
        }
    ];
  
    sourceGeek: Geek[] = this.data;
    targetGeek: Geek[] = [];
}




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


Article Tags :