Getting started with nxt-sortablejs

Installing

npm install --save nxt-sortablejs sortablejs

Import Sortablejs directive

import { SortablejsDirective } from 'nxt-sortablejs'

@Component({
    ...
    imports: [
        ...
        SortablejsDirective
    ]
})

If you want to cofigure global Sortablejs options, include provideGlobalSortableOptions in your application.

import { ApplicationConfig } from '@angular/core'
import { provideGlobalSortableOptions } from 'nxt-sortablejs'

export const appConfig: ApplicationConfig = {
    providers: [
        provideGlobalSortableOptions({
            animation: 150
        })
    ]
}

Use it in a template

<ul [nxtSortablejs]="items">
    <li *ngFor="let item of items">{{ item }}</li>
</ul>

Configuration options

Input	Type	Default value	Description
[nxtSortablejs]	SortableData<T>	`undefined`	Input data, can be Array or FormArray
[sortablejsContainer]	string	`undefined`	CSS selector for the sortable container Mostly required when used with custom components which wrap items in multiple containers. In that case, this should be the selector for the direct HTML parent of sortable items.
[config]	Options	`undefined`	Sortablejs configuration
[cloneFunction]	CloneFunction<T>	`undefined`	A function invoked when cloning items from template dataset into target dataset

Output	Type	Description
(init)	Sortable	Initialised a new Sortablejs instance