Angular PrimeNG PickList Component

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

Angular PrimeNG PickList Component:

• Responsive: In the responsive mode, the picklist adjusts its controls based on screen size. To activate this mode, set the responsive property to true.
• Headers: To define the headers, we use sourceHeader and targetHeader attributes.
• Multiple Selection: We can set it true by either using metaKey or toggled individually depending on the value of metaKeySelection property value which is true
• Filtering: We can enable filtering by the filterBy property. Options can be filtered using an input field in the overlay.
• Properties: The properties are used to modify the component and change its functions and design.
• Events: The events are used to trigger the actions that the user is performing while interacting to perform any required action by the site.
• Methods: The methods are used to modify the component with help of functions corresponding to some condition specified by the developer.
• Templates: The templates add a great level of functionality and productivity keeping the development simple and making the process faster.
• Styling: The styles are used to modify the default style of the component.

Syntax:

• Import the module

import {PickListModule} from 'primeng/picklist';

• Use the component.

<p-pickList ="list1" [target]="list2">
    <ng-template let-car pTemplate="item">
        <div>
            ...
        </div>
    </ng-template>
</p-pickList>

Creating Angular application & Module Installation:

Step 1: Create an Angular application using the following command.

ng new geeks_angular

Step 2: After creating your project folder i.e. geeks_angular, move to it using the following command.

cd geeks_angular

Step 3: Install PrimeNG and CDK in your given directory.

npm install primeng --save
npm install primeicons --save
npm install @angular/cdk --save

Project Structure: The project structure will look like the following:

Example 1: This example describes the basic usage of the basic Picklist component in Angular PrimeNG.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>
  Angular PrimeNG Picklist Component
</h3>
<p-pickList ="sourceTutorials"
            [target]="targetTutorials"
            sourceHeader="Tutorials Available in GeeksforGeeks"
            targetHeader="Selected Tutorials from GeeksforGeeks"
            [dragdrop]="true"
            [responsive]="true"
            [sourceStyle]="{ height: '500px' }"
            [targetStyle]="{ height: '500px' }">
    <ng-template let-tutorial pTemplate="item">
        <div>
            <div>
                <h5 class="mb-2">
                    {{ tutorial.title }}
                </h5>
                <h5>{{ tutorial.category }}</h5>
                <h6 class="mb-2">
                    Rating: {{ tutorial.rating }}
                </h6>
            </div>
        </div>
    </ng-template>
</p-pickList>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    sourceTutorials: Tutorial[];
    targetTutorials: Tutorial[];

    constructor(private primengConfig: PrimeNGConfig) { }

    ngOnInit() {
        this.sourceTutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];
        this.targetTutorials = [];
        this.primengConfig.ripple = true;
    }
}
export interface Tutorial {
    category?: string;
    title?: string;
    rating?: number;
}

• 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: This example describes the Picklist component in Angular PrimeNG, by enabling the filtering option.

• app.component.html

HTML

<h1 style="color: green;
           text-align:center;">
    GeeksforGeeks
</h1>
<h3>Angular PrimeNG Picklist Component</h3>
<p-pickList ="sourceTutorials"
            [target]="targetTutorials"
            sourceHeader="Tutorials Available in GeeksforGeeks"
            targetHeader="Selected Tutorials from GeeksforGeeks"
            [dragdrop]="true"
            [responsive]="true"
            [sourceStyle]="{ height: '500px' }"
            [targetStyle]="{ height: '500px' }"
            filterBy="title"
            sourceFilterPlaceholder="Search by title..."
            targetFilterPlaceholder="Search by title...">
    <ng-template let-tutorial pTemplate="item">
        <div>
            <div>
                <h5 class="mb-2">
                    {{ tutorial.title }}
                </h5>
                <h5>{{ tutorial.category }}</h5>
                <h6 class="mb-2">
                    Rating: {{ tutorial.rating }}
                </h6>
            </div>
        </div>
    </ng-template>
</p-pickList>

• app.component.ts

Javascript

import { Component } from '@angular/core';
import { PrimeNGConfig } from 'primeng/api';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    sourceTutorials: Tutorial[];
    targetTutorials: Tutorial[];

    constructor(private primengConfig: PrimeNGConfig) { }

    ngOnInit() {
        this.sourceTutorials = [
            {
                title: 'Queue',
                category: 'Data Structure',
                rating: 8,
            },
            {
                title: 'Circularly LinkedList',
                category: 'Data Structure',
                rating: 1,
            },
            {
                title: 'Doubly LinkedList',
                category: 'Data Structure',
                rating: 3,
            },
            {
                title: 'Singly LinkedList',
                category: 'Data Structure',
                rating: 5,
            },
            {
                title: 'Doubly Ended Queue',
                category: 'Data Structure',
                rating: 10,
            },
            {
                title: 'Binary Search Tree',
                category: 'Data Structure',
                rating: 2,
            },
            {
                title: 'Red Black Tree',
                category: 'Data Structure',
                rating: 9,
            },
            {
                title: 'Breadth First Search',
                category: 'Graph',
                rating: 6,
            },
            {
                title: "Floyd's Cycle",
                category: 'Algorithm',
                rating: 7,
            },
            {
                title: 'Travelling Salesman Problem',
                category: 'Algorithm',
                rating: 4,
            },
            {
                title: 'Bellman Ford',
                category: 'Graph',
                rating: 8,
            },
            {
                title: 'KMP Algorithm',
                category: 'String',
                rating: 10,
            },
        ];
        this.targetTutorials = [];
        this.primengConfig.ripple = true;
    }
}
export interface Tutorial {
    category?: string;
    title?: string;
    rating?: number;
}

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

Reference: http://primefaces.org/primeng/picklist