Data Binding
The Sortable enables you to bind it to an array of strings or objects, as well as to use its built-in directive to decrease the repetitive boilerplate code.
Binding to Arrays of Strings and Objects
You can set the data property of the Sortable component to an array of strings or objects.
Sorting items by using either drag-and-drop operations or the keyboard navigation will emit events, such as dragStart, dragOver, dragEnd, and others. The events provide the necessary information for manipulating the dataset manually or through the API of the Sortable.
Using the Built-In Directive
The Sortable provides the built-in SortableBindingDirective directive, which simplifies the handling of data operations by cutting down the repetitive boilerplate code.
The SortableBindingDirective will seamlessly keep the Sortable items and the data array that is passed to it in sync.
The following example demonstrates how to set up the binding.