Picklist

Feedback wanted!

Why is there a new component?

The picklist control consists of two lists: source and target. The source list provides an initial set of items. The user can select items by moving them to the target list.

Modal offers basic picklist with drag & drop, action buttons

Selected Values

{{ returnData | json }}

Modal offers custom picklist with drag & drop, action buttons, sort , usage of custom item templates

Modal offers custom picklist with drag & drop, action buttons, sort , usage of custom item templates, uasge of custom string/complex filter

Modal offers basic picklist with drag & drop, action buttons, sort and with an option to set max-limit for target items

By default, the picklist moves the items from left to right. If required the control can also copy the items.

Modal offers basic picklist with sort and ability to translate labels


Basic Picklist template

The example below is implemented in order to demo manual sorting by drag/drop and virtual scrolling behaviour of the picklist using cdk-virtual-scroll-viewport.

There are {{ thingsList.length }} items left, and you've already picked {{ targetItemCount }}.
Items will be loaded asynchronously and will show up after 3 seconds.