The PickList component is used to move items between two different lists. You can also reorder the items within each list. This provides the overall status of selected items. The items can be moved/reordered using either default button controls or drag and drop behavior. PickList requires two arrays, one is used for the source list and other one is for the target list. The ng-template template tag is used to display the item's content where each item in the array can be accessed using a local ng-template variable.

A basic example of the PickList component with country information would be written as follows:

<p-pickList [source]="sourceCountries" [target]="targetCountries"
  [sourceStyle]="{'height':'350px'}" [targetStyle]="{'height':'350px'}">
  <ng-template let-country pTemplate="item">
    <div class="ui-helper-clearfix">
      <img src="/assets/data/images/country/
        {{country.code.toLowerCase()}}.png" />
      <span>{{country.flag}} - {{country.name}}({{country.dial_code}})
      </span>
    </div>
  </ng-template>
</p-pickList>

In the component class, let's define a source list for available data and the target as an empty list to indicate that there is no selection yet. The country service needs to be injected to access the country information from external resources:

sourceCountries: Country[];
targetCountries: Country[];

constructor(private countryService: CountryService) { }

ngOnInit() {
  this.countryService.getCountries().subscribe(
    (countries: Country[]) => 
  {
    this.sourceCountries = countries;
  });
  this.targetCountries = [];
}

By default, both source and target panels are available with default width and height properties. But this default behavior can be customized using sourceStyle and targetStyle properties. The following screenshot shows a snapshot result of an initial PickList as an example:

The PickList component provides six event callbacks which are used for moving items between two lists and ordering the items in both source and target areas. Among these six callbacks, four of them are used for moving items, onMoveToTarget, onMoveToSource, onMoveAllToSource, and onMoveAllToSource whereas ordering items is performed by onSourceReorder and onTargetReorder.

The component can be customized from its default behavior in different ways as mentioned here:

• Headers can be customized using headers sourceHeader and targetHeader as properties.
• The web page will become responsive using the responsive property (responsive="true"), which adjusts the button controls based on screen size.
• The default multiple selection is prevented (with the help of the Meta key) by disabling the metaKeySelection attribute (metaKeySelection="false").
• The visibility of button controls is controlled through showSourceControls and showTargetControls properties. For example, showSourceControls="false" and showTargetControls="false".

PrimeNG 4.1 supports the filtering feature on item fields as a new addition using the filterBy property. Multiple fields can be filtered by placing the comma separated fields in the filterBy property:

<p-pickList [source]="sourceCountries" [target]="targetCountries" 
  filterBy="name, code">
  ...
</p-pickList>

The newer 4.1 version also supports the drag-and-drop feature (within the same list or across lists) by enabling the dragdrop property. It also provides the dragdropScope property, which holds the unique key to avoid conflicts with other drag-and-drop events. The drag-and-drop feature example would be as follows:

<p-pickList [source]="sourceCountries" [target]="targetCountries"   
  sourceHeader="Available" targetHeader="Selected" [dragdrop]="true" 
  dragdropScope="name">
   ...
</p-pickList>