import {PickListModule} from 'primeng/primeng';
PickList requires two arrays as its lists and a template for the item content where each item in the array can be accessed inside the template using a local template variable.
<p-pickList [source]="list1" [target]="list2">
<template let-car>
<div class="ui-helper-clearfix">
<img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
</div>
</template>
</p-pickList>
export class MyComponent {
list1: any[];
list2: any[];
ngOnInit() {
this.list1 = //initialize list 1
this.list2 = //initialize list 2
}
}
In responsive mode, picklist adjusts its controls based on screen size. To activate this mode, set responsive as true.
<p-pickList [responsive]="true">
sourceHeader and targetHeader attributes are used to define captions for the lists.
<p-pickList sourceHeader="Source List" targetHeader="Target List">
Name | Type | Default | Description |
---|---|---|---|
source | array | null | An array of objects for the source list. |
target | array | null | An array of objects for the target list. |
sourceHeader | string | null | Text for the source list caption |
targetHeader | string | null | Text for the target list caption |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
sourceStyle | string | null | Inline style of the source list element. |
targetStyle | string | null | Inline style of the target list element. |
responsive | boolean | false | When enabled orderlist adjusts its controls based on screen size. |
showSourceControls | boolean | true | Whether to show buttons of source list. |
showTargetControls | boolean | true | Whether to show buttons of target list. |
Name | Parameters | Description |
---|---|---|
onMoveToTarget | event.items: Moved items array | Callback to invoke when items are moved from source to target. |
onMoveToSource | event.items: Moved items array | Callback to invoke when items are moved from target to source. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-picklist | Container element. |
ui-picklist-source-controls | Container of source list buttons. |
ui-picklist-target-controls | Container of target list buttons. |
ui-picklist-buttons | Container of buttons. |
ui-picklist-listwrapper | Parent of a list element. |
ui-picklist-list | List element. |
ui-picklist-item | An item in the list. |
None.
<p-pickList [source]="sourceCars" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true" [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
<template let-car>
<div class="ui-helper-clearfix">
<img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/>
<div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
</div>
</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 = [];
}
}