Angular Sortable List and Drag and Drop | ng-hub-ui-sortable

Angular sortable list and drag-and-drop utilities for arrays, FormArray integration, Signals workflows and connected lists.

Overview

Why teams search for this library

Choose this Angular sortable library when you need drag and drop ordering that works with arrays, reactive forms, Signals and complex UI builders.

Install

npm install ng-hub-ui-sortable

Jump to

Ideal for

  • task ordering
  • FormArray editors
  • layout builders
  • priority management

About sortable

ng-hub-ui-sortable helps Angular teams reorder data naturally in products where order matters: tasks, priorities, layout builders or dynamic form blocks. It is especially useful when you need drag and drop without losing control over state updates.

Feature guides

Core Usage

Basic usage scenarios for sortable lists.

Examples:
Simple Array

Reorder plain arrays.

Live preview is not available for this example yet.

Code
Signals

Bind sortable data to Angular writable signals.

Live preview is not available for this example yet.

Code

Forms Integration

Use sortable with Angular reactive forms.

Examples:
FormArray Integration

Reorder FormArray controls with drag and drop.

Live preview is not available for this example yet.

Code

Advanced Configuration

Customize SortableJS behavior and interactions.

Examples:
Custom Options

Configure handles, filters, animation and events.

Live preview is not available for this example yet.

Code
Multiple Lists

Connect lists, clone items and control transfer rules.

Live preview is not available for this example yet.

Code
Layout Builder

Nested sortable containers with tabs and widgets.

Live preview is not available for this example yet.

Code
Manual Mode

Disable auto updates and apply array updates manually.

Live preview is not available for this example yet.

Code

Key features

Array and list ordering

Reorder domain data in Angular without reinventing drag and drop behavior.

Works with FormArray

A strong fit for dynamic forms and configurable interfaces where controls must move with the model.

Connected drag-and-drop flows

Manage multiple lists, transfers and builder-style experiences with Angular-friendly state handling.

Recent changes

No changelog entries available.

Related libraries

ng-hub-ui-paginable ng-hub-ui-board ng-hub-ui-history