PickList | Neural UI v2

Usage

Apply itemsChange.source and itemsChange.target together so an item is never duplicated across lists. sourceChange and targetChange expose individual proposals, while itemsChange is the complete transfer. moveAllScope="filtered" moves only visible eligible items; "all" uses the full eligible collection. Disabled items cannot be moved.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Available

Selected

No matching projects

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Available

Selected

No matching projects

Events: 0

filter

dragDrop

Advanced options · 9

<neu-pick-list
  [source]="available()"
  [target]="chosen()"
  [filter]="true"
  [dragDrop]="false"
  (itemsChange)="
    available.set($event.source);
    chosen.set($event.target);
    record('itemsChange', $event)
  "
  [sourceHeader]="'Available'"
  [targetHeader]="'Selected'"
  [emptyFilterLabel]="'No matching projects'"
  [filterPlaceholder]="'Search projects'"
  [sourceFilterLabel]="'Filter available projects'"
  [targetFilterLabel]="'Filter selected projects'"
></neu-pick-list>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const available = signal([
  {
    "value": "atlas",
    "label": "Atlas"
  },
  {
    "value": "birch",
    "label": "Birch"
  },
  {
    "value": "cedar",
    "label": "Cedar"
  },
  {
    "value": "locked",
    "label": "Locked",
    "disabled": true
  }
]);

export const chosen = signal([]);

Data, callback and structured configuration inputs

These inputs require a model or function, not a checkbox. Edit the same-named field in the Source component and bind it in the template; data already used by this preview appears in the state above.

filterConfig · Readonly<NeuOptionFilterConfig<T>>

In Source: define filterConfig with this type and use [filterConfig]="filterConfig" (or filterConfig() for a signal).

optionDisabled · NeuOptionDisabledAccessor<T> | null

In Source: define optionDisabled with this type and use [optionDisabled]="optionDisabled" (or optionDisabled() for a signal).

optionLabel · NeuOptionLabelAccessor<T> | null

In Source: define optionLabel with this type and use [optionLabel]="optionLabel" (or optionLabel() for a signal).

optionValue · NeuOptionValueAccessor<T, V> | null

In Source: define optionValue with this type and use [optionValue]="optionValue" (or optionValue() for a signal).

sourceSelectionKeys · readonly V[] | undefined

In Source: define sourceSelectionKeys with this type and use [sourceSelectionKeys]="sourceSelectionKeys" (or sourceSelectionKeys() for a signal).

targetSelectionKeys · readonly V[] | undefined

In Source: define targetSelectionKeys with this type and use [targetSelectionKeys]="targetSelectionKeys" (or targetSelectionKeys() for a signal).

State and events

Apply itemsChange.source and itemsChange.target together so an item is never duplicated across lists. sourceChange and targetChange expose individual proposals, while itemsChange is the complete transfer. moveAllScope="filtered" moves only visible eligible items; "all" uses the full eligible collection. Disabled items cannot be moved.

Accessibility and keyboard

Use Tab to reach items and transfer buttons. Enter or Space selects an item or activates a transfer button. These controls remain available when dragDrop is false.

Key	Action
`Tab`	Move through item buttons and the available reorder or transfer buttons.
`Enter`	Select the focused item or activate the focused reorder/transfer button. Dragging is not required.
`Space`	Select the focused item or activate the focused reorder/transfer button. Dragging is not required.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`dragDrop`	`boolean`	`false`	`[dragDrop]`	Enable optional pointer drag/drop; keyboard and button operations remain available.
`emptyFilterLabel`	`string`	`'No matching items'`	`[emptyFilterLabel]`	Text displayed when filtering produces no matching entries.
`filter`	`boolean`	`false`	`[filter]`	Changed raw search query from user input.
`filterConfig`	`Readonly<NeuOptionFilterConfig<T>>`	`{}`	`[filterConfig]`	Fields, matching mode, locale and client/server filtering strategy.
`filterPlaceholder`	`string`	`'Filter items'`	`[filterPlaceholder]`	Accessible name or placeholder for the corresponding list filter.
`moveAllScope`	`NeuPickListMoveAllScope`	`'filtered'`	`[moveAllScope]`	Choose whether move-all transfers the filtered visible entries or all eligible entries.
`optionDisabled`	`NeuOptionDisabledAccessor<T> \| null`	`null`	`[optionDisabled]`	Field name or function that marks an option as disabled.
`optionLabel`	`NeuOptionLabelAccessor<T> \| null`	`null`	`[optionLabel]`	Field name or function used to obtain the visible option label.
`optionValue`	`NeuOptionValueAccessor<T, V> \| null`	`null`	`[optionValue]`	Field name or function used to obtain the stored option value.
`source`	`readonly T[]`	`[]`	`[source]`	Applied collection on the corresponding available or selected side.
`sourceFilterLabel`	`string`	`'Filter available items'`	`[sourceFilterLabel]`	Accessible name or placeholder for the corresponding list filter.
`sourceFilterValue`	`string \| null`	`null`	`[sourceFilterValue]`	Applied text filter; null leaves filter text owned by the component.
`sourceHeader`	`string`	`'Available'`	`[sourceHeader]`	Visible heading for the corresponding transfer list.
`sourceSelectionKeys`	`readonly V[] \| undefined`	`undefined`	`[sourceSelectionKeys]`	Applied stable option values for selected entries. Undefined uses the local selection mode.
`target`	`readonly T[]`	`[]`	`[target]`	Applied collection on the corresponding available or selected side.
`targetFilterLabel`	`string`	`'Filter selected items'`	`[targetFilterLabel]`	Accessible name or placeholder for the corresponding list filter.
`targetFilterValue`	`string \| null`	`null`	`[targetFilterValue]`	Applied text filter; null leaves filter text owned by the component.
`targetHeader`	`string`	`'Selected'`	`[targetHeader]`	Visible heading for the corresponding transfer list.
`targetSelectionKeys`	`readonly V[] \| undefined`	`undefined`	`[targetSelectionKeys]`	Applied stable option values for selected entries. Undefined uses the local selection mode.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`itemDrop`	`NeuPickListDropEvent<T>`	`(itemDrop)="onItemDrop($event)"`	Reports a pointer/keyboard drop with item, list locations and indexes. Apply the associated state proposal to accept it.
`itemsChange`	`{ source: T[]; target: T[]; }`	`(itemsChange)="onItemsChange($event)"`	Proposes both source and target arrays. Apply them together to accept an atomic transfer.
`sourceChange`	`T[]`	`(sourceChange)="onSourceChange($event)"`	Proposes the replacement collection on the corresponding side of PickList.
`sourceFilterChange`	`string`	`(sourceFilterChange)="onSourceFilterChange($event)"`	Proposes the text filter for the corresponding list.
`sourceSelectionChange`	`T[]`	`(sourceSelectionChange)="onSourceSelectionChange($event)"`	Reports the selected item objects on the corresponding list.
`targetChange`	`T[]`	`(targetChange)="onTargetChange($event)"`	Proposes the replacement collection on the corresponding side of PickList.
`targetFilterChange`	`string`	`(targetFilterChange)="onTargetFilterChange($event)"`	Proposes the text filter for the corresponding list.
`targetSelectionChange`	`T[]`	`(targetSelectionChange)="onTargetSelectionChange($event)"`	Reports the selected item objects on the corresponding list.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`NeuPickListItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuPickListItem]`

NeuPickListItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuPickListItem]

Declaration

import type { NeuTransferItem } from '@neural-ui/core/pick-list';

import { NeuPickListItemDirective } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export declare class NeuPickListItemDirective<T = NeuTransferItem> {
  readonly neuPickListItem: import("@angular/core").InputSignal<"" | readonly T[]>;
}

Full context

import type { NeuPickListItemContext } from '@neural-ui/core/pick-list';

import { NeuPickListItemDirective } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
readonly templateRef: TemplateRef<NeuPickListItemContext<T>>;

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

NeuPickListItemDirective

NeuPickListItemDirective

Available

Selected

No matching projects

Events: 0

Public Types

Open a type to inspect its definition and interface fields.

NeuListLocationTypeScript

NeuListMoveTypeScript

NeuOptionAccessorTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionAccessor<T, R = unknown> = Exclude<keyof T, string> | NeuOptionPath<T> | ((option: T) => R);

NeuOptionDisabledAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionDisabledAccessor } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionDisabledAccessor<T> = NeuOptionAccessor<T, boolean>;

NeuOptionFilterConfigTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';
import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';
import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

import type { NeuOptionFilterConfig } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export interface NeuOptionFilterConfig<T> {
  readonly fields?: readonly NeuOptionAccessor<T, unknown>[];
  readonly locale?: string;
  readonly matchMode?: NeuOptionFilterMatchMode;
  readonly strategy?: NeuOptionFilterStrategy;
}

NeuOptionFilterMatchModeTypeScript

import type { NeuOptionFilterMatchMode } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionFilterMatchMode = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals';

NeuOptionFilterStrategyTypeScript

import type { NeuOptionFilterStrategy } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionFilterStrategy = 'client' | 'server';

NeuOptionLabelAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionLabelAccessor } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionLabelAccessor<T> = NeuOptionAccessor<T, string>;

NeuOptionPathTypeScript

import type { NeuOptionPath } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionPath<T> = Extract<keyof T, string> | `${Extract<keyof T, string>}.${string}`;

NeuOptionValueAccessorTypeScript

import type { NeuOptionAccessor } from '@neural-ui/core/option-api';

import type { NeuOptionValueAccessor } from '@neural-ui/core/option-api';

// Public declaration (reference only)
export type NeuOptionValueAccessor<T, V> = NeuOptionAccessor<T, V>;

NeuOrderListItemContextTypeScript

import type { NeuOrderListItemContext } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export interface NeuOrderListItemContext<T> {
  readonly $implicit: T;
  readonly index: number;
  readonly selected: boolean;
}

NeuPickListDropEventTypeScript

import type { NeuListLocation } from '@neural-ui/core/pick-list';

import type { NeuPickListDropEvent } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export interface NeuPickListDropEvent<T> {
  readonly currentIndex: number;
  readonly from: NeuListLocation;
  readonly interaction: 'pointer' | 'keyboard';
  readonly item: T;
  readonly originalEvent: MouseEvent | TouchEvent | KeyboardEvent | null;
  readonly previousIndex: number;
  readonly to: NeuListLocation;
}

NeuPickListItemContextTypeScript

import type { NeuListLocation } from '@neural-ui/core/pick-list';

import type { NeuPickListItemContext } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export interface NeuPickListItemContext<T> {
  readonly $implicit: T;
  readonly location: NeuListLocation;
  readonly selected: boolean;
}

NeuPickListMoveAllScopeTypeScript

import type { NeuPickListMoveAllScope } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export type NeuPickListMoveAllScope = 'filtered' | 'all';

NeuTransferItemTypeScript

import type { NeuTransferItem } from '@neural-ui/core/pick-list';

// Public declaration (reference only)
export interface NeuTransferItem {
  data?: unknown;
  disabled?: boolean;
  label: string;
  value: string;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-border-hover`	Control borders on hover	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.16)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-transition`	Timing of state changes	Shared by other Core consumers; scope the override.	`200ms ease`

Related components

Use related components when your task requires a different interaction or a composed control.