Picklist (Deprecated)

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.

The control offers a variety of functionalities:

Note that the returned item arrays are newly created arrays but contain the original source/target list object references.

Items will be loaded asynchronously and uses cdk-virtual-scroll-viewport to enable virtual scrolling behaviour.
Available Items
Selected Items
There are {{ thingsList.length }} items left, and you've already picked {{ targetItemCount }}.

Custom item templates

The picklist tries four different strategies in the following order to display its items:

  1. Use the custom item templates. If not defined, then
  2. use the display property (this only works for objects). If not defined or not applicable, then
  3. display the item data directly if the item data is of type boolean, number, or string. Eventually, if the item is of type object then
  4. display the JSON representation of the item data as last fall back.

If complex objects are displayed, a display property should always be specified, as this is used to fill the drag/drop placeholder.


Custom filtering and sorting

The picklist supports four different filter types:

  1. No filter (default),
  2. default in-built string filter,
  3. custom string filter, and
  4. custom complex filter.

The in-built string filters work out of the box by filtering the items using the display property. If the items are of type boolean, number, or string the item values will be filtered directly.

The example below groups the fruits based on their origin and sorts the fruits within the group in ascending order.


Target items max limit

In the example below there is a max limit of 3 applied to the target list.

This means that no more than 3 items can be added into the target list.


Copy mode

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

In the example below, manual sorting by drag/drop is enabled. Note that if a target filter is active, drag/drop within the target list is temporarily deactivated.


Internationalization