Sortable List for Angular

import { AuiSortableList } from '@absoluteui/angular/sortable-list';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Sortable List page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { sortableList: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { SortableListChangeDetail, SortableListItem } from '@absoluteui/components/sortable-list';
import { AuiSortableList } from '@absoluteui/angular/sortable-list';

@Component({
  selector: 'app-priorities',
  imports: [AuiSortableList],
  template: `<aui-sortable-list label="Priorities" [items]="items" (changed)="save($event.order)"></aui-sortable-list>`,
})
export class PrioritiesComponent {
  items: SortableListItem[] = [
    { id: 'security', label: 'Security review' },
    { id: 'performance', label: 'Performance' },
    { id: 'docs', label: 'Documentation' },
  ];

  save(order: SortableListChangeDetail['order']): void {
    const byId = new Map(this.items.map((item) => [item.id, item] as const));
    this.items = order.flatMap((id) => byId.get(id) ?? []);
    // persist `order`
  }
}

<aui-sortable-list>

Class AuiSortableList; template reference #ref="auiSortableList".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the list (aria-label on the <ul>). Must be non-empty after trimming.
items	readonly SortableListItem[]		Required. Items in order. Ids must be unique, non-empty, and stable; labels non-empty (used in the handle name and announcements). Rows are kept by id on update; the array order defines the DOM order.
disabled	boolean	false	Disable reordering for the whole list (all handles disabled).
icons	Partial<SortableListIcons>		Icon slot overrides.
dragFrom	SortableListDragFrom	'handle'	Where a pointer drag can start: the handle only, or anywhere on a movable item (interactive content inside the item keeps its own pointer behavior).

Outputs

Output	Payload	Description
(changed)	SortableListChangeDetail	Dispatched on the host after a keyboard or pointer drop that changed the item’s position. from and to are zero-based. Not emitted for cancels, drops in place, move(), or update(). Re-emits aui-change.

Read-only state

Property	Type	Description
isDragging	Signal<boolean>	Whether an item is grabbed (keyboard) or dragged (pointer).

Methods

Call them through a viewChild query or a template reference.

Method	Description
move(id: string, index: number): void	Move an item to a zero-based index; cancels an active grab or drag first. No event, no announcement. Throws SORTABLE_LIST_OPTIONS for an unknown id or an index outside 0..count-1.