Angular PrimeNG PickList Properties

Last Updated : 02 Feb, 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 Properties.

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.

Angular PrimeNG PickList Properties:

source: An array of objects for the source list. It is of the array data type, the default value is null.
target: An array of objects for the target list. It is of the array data type, the default value is null.
sourceHeader: This is used for the source list header. It is of the string data type, the default value is null.
targetHeader: This is used for the target list header. It is of the string data type, the default value is null.
filterBy: This is used to decide which field to search. It is of the string data type, the default value is null.
filterLocale: This is used to decide the language of the filter. It is of the string data type, the default value is undefined.
trackBy: Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity. It is of the function data type, the default value is null.
sourceTrackBy: This Function is used to optimize the dom operations by delegating to ngForTrackBy in the source list. It is of the function data type, the default value is null.
targetTrackBy: This Function is used to optimize the dom operations by delegating to ngForTrackBy in the target list, the default algorithm checks for object identity. It is of the functional type, and the default value is null.
showSourceFilter: To show filter input for the source list. It is of the boolean data type, and the default value is true.
showTargetFilter: To show filter input for the target list. It is of the boolean data type, and the default value is true.
dragdrop: To enable dragdrop-based reordering. It is of the boolean data type, the default value is false.
style: Style of the component. It is of the string data type, the default value is null.
styleClass: Style class of the component. It is of the string data type, the default value is null.
sourceStyle: Inline style of the source list element. It is of the string data type, the default value is null.
targetStyle: Inline style of the target list element. It is of the string data type, the default value is null.
responsive: To make the picklist responsive based on screen size. It is of the boolean data type, the default value is false.
showSourceControls: To show buttons of the source list. It is of the boolean data type, and the default value is true.
showTargetControls: To show buttons of the target list. It is of the boolean data type, and the default value is true.
metaKeySelection: Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item, and when set to a false selection each item can be toggled individually. It is of the boolean data type, and the default value is true.
sourceFilterPlaceholder: Placeholder text on source filter input. It is of the string data type, the default value is null.
targetFilterPlaceholder: Placeholder text on target filter input. It is of the string data type, the default value is null.
disabled: To disable the component. It is of the boolean data type, the default value is false.
keepSelection: Keeps selection on the transfer list. It is of the boolean data type, the default value is false.
ariaSourceFilterLabel: This is used to define a string that labels the filter input of the source list. It is of the string data type, the default value is null.
ariaTargetFilterLabel: This is used to define a string that labels the filter input of the target list. It is of the string data type, the default value is null.
rightButtonAriaLabel: This is used to define a string that labels the move to the right button for accessibility. It is of the string data type, the default value is null.
leftButtonAriaLabel: This is used to define a string that labels the move to the left button for accessibility. It is of the string data type, the default value is null.
allRightButtonAriaLabel: This is used to define a string that labels the move to all right button for accessibility. It is of the string data type, the default value is null.
allLeftButtonAriaLabel: This is used to define a string that labels the move to an all-left button for accessibility. It is of the string data type, the default value is null.
upButtonAriaLabel: This is used to define a string that labels the move to the up button for accessibility. It is of the string data type, the default value is null.
downButtonAriaLabel: This is used to define a string that labels the move to the down button for accessibility. It is of the string data type, the default value is null.
topButtonAriaLabel: This is used to define a string that labels the move to the top button for accessibility. It is of the string data type, the default value is null.
bottomButtonAriaLabel: This is used to define a string that labels the move to the bottom button for accessibility. It is of the string data type, the default value is null.
stripedRows: This is used to define to display rows with alternating colors. It is of the boolean data type, the default value is false.

Syntax:

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

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

Example 1: Below is the example code that illustrates the use of Angular PrimeNG Picklist properties. In this example, we will learn about sourceHeader, targetHeader, showSourceControls, and showTargetControls.

app.component.html:

HTML

<h1 style="color: green;"> 
    GeeksforGeeks 
</h1> 
<h3> 
  Angular PrimeNG Picklist Properties 
</h3> 
<p-pickList  
    sourceHeader="I am a Source Header"
    targetHeader="I am a target Header" 
    [showSourceControls]="false" 
    [showTargetControls]="false"> 
</p-pickList>

app.component.ts:

Javascript

import {Component} from '@angular/core'; 
  
@Component({ 
  selector: 'app-root', 
  templateUrl: './app.component.html'
}) 
  
export class AppComponent { }

app.module.ts:

Javascript

import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { FormsModule } from "@angular/forms"; 
import { HttpClientModule } from "@angular/common/http"; 
import { BrowserAnimationsModule }  
    from "@angular/platform-browser/animations"; 
import { AppComponent } from "./app.component"; 
import { PickListModule } from "primeng/picklist"; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        PickListModule, 
        HttpClientModule, 
        FormsModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}

Output:

Example 2: Below is another example code that illustrates the use of Angular PrimeNG Picklist properties. In this example, we will learn about sourceFilterPlaceholder, targetFilterPlaceholder, filterBy, source, target, targetStyle, sourceStyle, responsive, dragdrop.

app.component.html:

HTML

<div style="width: 80%;"> 
    <h1 style="color: green;">GeeksforGeeks</h1> 
    <h2>Angular PrimeNG PickList Properties</h2> 
    <p-pickList
        ="sourceProducts" 
        [target]="targetProducts" 
        targetHeader="I am a GFG Target List"
        [dragdrop]="true" 
        sourceHeader="I am a GFG Source List"
        filterBy="name,price"
        sourceFilterPlaceholder="Search by Name / Cost"
        targetFilterPlaceholder="Search by Name / Cost"
        [responsive]="true" 
        style="width: 50%;"
        [targetStyle]="{'height':'300px','background-color':'yellow'}" 
        [sourceStyle]="{'height':'300px','background-color':'pink'}"> 
        <ng-template let-product pTemplate="item"> 
            <div class="product-item"
                style="background-color: green; color: white;"> 
                <div class="product-list-detail"> 
                    <h5>{{product.name}}</h5> 
  
                    <img [src]="product.image" width="48" /> 
                </div> 
                <div class="product-list-action"> 
                    <h6>Rs  {{product.price}}</h6> 
                </div> 
            </div> 
        </ng-template> 
    </p-pickList> 
</div>

app.component.ts:

Javascript

import { Component } from "@angular/core"; 
import { Product } from "./product"; 
  
@Component({ 
    selector: "app-root", 
    templateUrl: "./app.component.html", 
    styleUrls: ["./app.component.css"] 
}) 
  
export class AppComponent { 
    data: Product[] = [ 
        { 
            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 
        } 
    ]; 
    sourceProducts: Product[] = this.data; 
    targetProducts: Product[] = []; 
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core"; 
import { BrowserModule } from "@angular/platform-browser"; 
import { FormsModule } from "@angular/forms"; 
import { HttpClientModule } from "@angular/common/http"; 
import { BrowserAnimationsModule }  
    from "@angular/platform-browser/animations"; 
import { AppComponent } from "./app.component"; 
import { PickListModule } from "primeng/picklist"; 
  
@NgModule({ 
    imports: [ 
        BrowserModule, 
        BrowserAnimationsModule, 
        PickListModule, 
        HttpClientModule, 
        FormsModule 
    ], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent] 
}) 
  
export class AppModule {}