Angular PrimeNG PickList Responsive
Last Updated :
28 Apr, 2025
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.
Angular PrimeNG PickList is used to reorder items between different lists, and In responsive mode, the picklist adjusts its controls based on screen size. To activate this mode, set responsive as true.
Syntax:
<p-pickList [responsive]="true">
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:
Example 1: In this example, we will see a set responsive property
product.ts
JavaScript
export interface Product {
id?: string;
code?: string;
name?: string;
description?: string;
price?: number;
quantity?: number;
inventoryStatus?: string;
category?: string;
image?: string;
rating?: number;
}
app.component.html
HTML
<div style="width:80%">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG PickList Responsive</h2>
<p-pickList [source]="sourceProducts"
[target]="targetProducts" [dragdrop]="true"
[responsive]="true"
[sourceStyle]="{'height':'300px'}"
[targetStyle]="{'height':'300px'}"
style="width:50%">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="mb-2">{{product.name}}</h5>
<img [src]="product.image" s
style="display:inline-block;
margin:2px 0 2px 2px"
width="48">
<span class="product-category">
{{product.category}}
</span>
</div>
<div class="product-list-action">
<h6 class="mb-2">
Rs {{product.price}}
</h6>
</div>
</div>
</ng-template>
</p-pickList>
</div>
app.component.css
CSS
.product-item {
display: flex;
align-items: center;
padding: .5rem;
width: 100%;
color:white;
background-color: green;
}
img {
width: 75px;
box-shadow: 0 3px 6px
rgba(0, 0, 0, 0.16), 0 3px 6px
rgba(0, 0, 0, 0.23);
margin-right: 1rem;
}
.product-list-detail {
flex: 1 1 0;
}
.product-list-action {
display: flex;
flex-direction: column;
align-items: flex-end;
}
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 { AppComponent } from './app.component';
import { PickListModule } from 'primeng/picklist';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
PickListModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Output:
Example 2: In this example, we will see how responsiveness works with properties like Headers and Filter
product.ts
JavaScript
export interface Product {
id?: string;
code?: string;
name?: string;
description?: string;
price?: number;
quantity?: number;
inventoryStatus?: string;
category?: string;
image?: string;
rating?: number;
}
app.component.html
HTML
<div style="width:80%">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>Angular PrimeNG PickList Responsive</h2>
<p-pickList [source]="sourceProducts"
[target]="targetProducts"
targetHeader="Target List"
[dragdrop]="true"
[responsive]="true"
[sourceStyle]="{'height':'300px'}"
[metaKeySelection]="true"
sourceHeader="Source List"
filterBy="name"
sourceFilterPlaceholder="Search by name"
targetFilterPlaceholder="Search by name"
[targetStyle]="{'height':'300px'}"
style="width:50%">
<ng-template let-product pTemplate="item">
<div class="product-item">
<div class="product-list-detail">
<h5 class="mb-2">{{product.name}}</h5>
<img [src]="product.image"
style="display:inline-block;
margin:2px 0 2px 2px"
width="48">
<span class="product-category">
{{product.category}}
</span>
</div>
<div class="product-list-action">
<h6 class="mb-2">
Rs {{product.price}}
</h6>
</div>
</div>
</ng-template>
</p-pickList>
</div>
app.component.css
CSS
.product-item {
display: flex;
align-items: center;
padding: 0.5rem;
width: 100%;
color: white;
background-color: green;
}
img {
width: 75px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
margin-right: 1rem;
}
.product-list-detail {
flex: 1 1 0;
}
.product-list-action {
display: flex;
flex-direction: column;
align-items: flex-end;
}
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 { 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
Similar Reads
Angular PrimeNG Dialog Responsive 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. In this article, we will know how to use Dialog Responsive in Angular PrimeNG. We will also learn ab
6 min read
Angular PrimeNG PickList Properties 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.
8 min read
Angular PrimeNG Galleria Responsive 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. In this article, we will see the Angular PrimeNG Galleria Responsive. Galleria in Angular PrimeNG is
4 min read
Angular PrimeNG Carousel Responsive 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. This article will show us how to use Basic Carousel in Angular PrimeNG. Angular PrimeNG Basic Carous
4 min read
Angular PrimeNG PickList Styling 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.
4 min read
Angular PrimeNG PickList Templates 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.
4 min read