Angular PrimeNG PickList 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.

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":
'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 ="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