OrderList | Neural UI v2

Usage

Use stable option values to identify items. selectionChange supplies selected items; orderChange proposes the new array. Apply that array to items to accept a reorder. Filtering changes the visible subset, not the source collection. dragDrop is optional; buttons and keyboard offer the same operation.

Examples

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

Events: 0

Try and configure

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

Events: 0

filter

dragDrop

Advanced options · 5

<neu-order-list
  (filterChange)="onFilterChange($event)"
  [items]="available()"
  [filter]="true"
  [dragDrop]="false"
  [selectionKeys]="selected()"
  (selectionChange)="selected.set($event.map(itemKey))"
  (orderChange)="available.set($event); record('orderChange', $event)"
  [ariaLabel]="'Ordered projects'"
  [emptyFilterLabel]="'No matching projects'"
  [filterLabel]="'Filter projects'"
  [filterPlaceholder]="'Search projects'"
></neu-order-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 selected = 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).

State and events

Use stable option values to identify items. selectionChange supplies selected items; orderChange proposes the new array. Apply that array to items to accept a reorder. Filtering changes the visible subset, not the source collection. dragDrop is optional; buttons and keyboard offer the same operation.

Accessibility and keyboard

Use Tab to reach items and reorder buttons. Enter or Space selects an item or activates a reorder 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
`ariaLabel`	`string`	`'Ordered items'`	`[ariaLabel]`	Accessible name of the control or region.
`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.
`filterLabel`	`string`	`'Filter ordered items'`	`[filterLabel]`	Accessible name or placeholder for the corresponding list filter.
`filterPlaceholder`	`string`	`'Filter items'`	`[filterPlaceholder]`	Accessible name or placeholder for the corresponding list filter.
`filterValue`	`string \| null`	`null`	`[filterValue]`	Applied search query. Listen to filterChange when the application controls it.
`items`	`readonly T[]`	`[]`	`[items]`	Applied item collection. Stable keys and accessors identify entries; the component does not mutate the array.
`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.
`selectionKeys`	`readonly V[] \| undefined`	`undefined`	`[selectionKeys]`	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
`filterChange`	`string`	`(filterChange)="onFilterChange($event)"`	Proposes the complete updated filter array, including active states. Replace filters to accept it.
`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.
`orderChange`	`T[]`	`(orderChange)="onOrderChange($event)"`	Proposes the complete reordered array. Replace items or tiles to accept it.
`selectionChange`	`T[]`	`(selectionChange)="onSelectionChange($event)"`	Proposes selection together with the affected key and interaction source. Apply payload.selection to selection.

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
`NeuOrderListItemDirective`View example	Public template directive (entrypoint)	`ng-template[neuOrderListItem]`

NeuOrderListItemDirectiveView example

Public template directive (entrypoint)

ng-template[neuOrderListItem]

Declaration

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

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

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

Full context

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

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

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

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

NeuOrderListItemDirective

NeuOrderListItemDirective

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
No data

Related components

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