Is it possibile select one element at time in pick list prime ng

Question

I need to do my pick list one selected. The default behavior is when the user click on more items (source panel) it selects all and pass them in the target panel. I want the when the user click on source items it can selected only one item. This is my html code:

p-pickList [responsive]="true" sourceHeader="Prov" targetHeader="Ass" [source]="list1" [target]="lis2" [metaKeySelection]="false" >

I don't know what property I need to use. Anyone can help me?

Answer 1

If someone need an answer I've just found a simple way to do unique selection with PrimeNG PickList.

HTML:

<p-pickList
    [metaKeySelection]="false"
    (onSourceSelect)="onElementSelect($event)"
>
    <ng-template let-element Template="item">
        <span>
            {{ element }}
        </span>
    </ng-template>
</p-pickList>

Typescript :

// Make the PickList not multiple
public onElementSelect(event): void {
    if (event.items.length > 1) {
        event.items.splice(0, event.items.length - 1);
    }
}

Answer 2

You use this code.

 <p-pickList #listPickerCtrl                   
   (onSourceSelect)="onSourceSelect($event)"
   (onTargetSelect)="onTargetSelect($event)">
 </p-pickList>

import { PickList } from 'primeng/picklist';

@ViewChild('listPickerCtrl') listPickerCtrl: PickList;

onSourceSelect(args: any) {
    // Disable multiple selection
    if (args.items.length > 1) {
      const lastItemIndex = args.items.length - 1;
      if (lastItemIndex > -1) {
        this.listPickerCtrl.selectedItemsSource.splice(lastItemIndex, 1);
      }
    }
  }

 onTargetSelect(args: any) {
    // Disable multiple selection
    if (args.items.length > 1) {
      const lastItemIndex = args.items.length - 1;
      if (lastItemIndex > -1) {
        this.listPickerCtrl.selectedItemsTarget.splice(lastItemIndex, 1);
      }
    }
  }