PickListPickList is used to reorder items between differents lists.

Documentation

Import

import {PickListModule} from 'primeng/picklist';
 

Getting Started

PickList requires two arrays as its lists and a ng-template for the item content where each item in the array can be accessed inside the ng-template using a local ng-template variable.

<p-pickList [source]="list1" [target]="list2">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-pickList>
 

export class MyComponent {
    list1: any[];
    list2: any[];
    ngOnInit() {
        this.list1 = //initialize list 1
        this.list2 = //initialize list 2
    }
}
 

Responsive

In responsive mode, picklist adjusts its controls based on screen size. To activate this mode, set responsive as true.

<p-pickList [responsive]="true">
 

Headers

sourceHeader and targetHeader attributes are used to define captions for the lists.

<p-pickList sourceHeader="Source List" targetHeader="Target List">
 

Multiple Selection

Multiple items can either be selected using metaKey or toggled individually depending on the value of metaKeySelection property value which is true by default. On touch enabled devices metaKeySelection is turned off automatically.

Filtering

Options can be filtered using an input field in the overlay by enabling the filterBy property. This filterBy property decides which field to search(Accepts multiple fields with a comma).

<p-pickList [source]="sourceCars" [target]="targetCars" filterBy="brand"></p-pickList>
 

DragDrop

Items can be reordered using drag and drop by enabling dragdrop property along with dragdropScope to avoid conflict with other drag drop events on view.This dragdrop property also supports cross list actions.

<p-pickList [source]="sourceCars" [target]="targetCars" dragdrop="true"></p-pickList>
 

Templates

Properties

Events

Methods

<p-pickList #pl [source]="sourceCars" [target]="targetCars" filterBy="brand"></p-pickList>
<button type="button" pButton (click)="pl.resetFilter()" label="Reset"></button>
 

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Dependencies

None.

Source

View on GitHub

<p-pickList [source]="sourceCars" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true" filterBy="brand" 
        dragdrop="true" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix">
            <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48">
            <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
        </div>
    </ng-template>
</p-pickList>
 

export class PickListDemo {
    sourceCars: Car[];
    targetCars: Car[];
    constructor(private carService: CarService) { }
    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.sourceCars = cars);
        this.targetCars = [];
    }
}