Angular PrimeNG PickList Responsive
Last Updated :
10 Nov, 2022
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 ="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":
"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,
},
]
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 ="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":
"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,
},
]
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
Share your thoughts in the comments
Please Login to comment...