ngx-sortable

![npm]()
![Codecov branch]()
![npm]()
![GitHub top language]()
![GitHub code size in bytes]()
![GitHub issues]()
![GitHub closed issues]()
![GitHub contributors]()

ngx-sortable an angular 4 and above component for sorting list supporting drag and drop sort.

Features

* Custom template
* Customizable
* Drag and drop sorting
* Use keyboard to sort
* Remove elements

Examples

* demo-page

Installation

* npm install ngx-sortable

$3

* import NgxSortableModule into your app.module;
```
import { NgxSortableModule } from 'ngx-sortable'
``
* add NgxSortableModule to the imports of your NgModule:
```
@NgModule({
imports: [
...,
NgxSortableModule
],
...
})
class YourModule { ... }
```

* use in your templates to add sortable list in your view

Deprecated


``

{{item}}

``


v2.0.0 onwards use below


``

{{item}}

``

Where content inside is the template that will be used for displaying list items. Also the class can be named accordingly this is just an example. Create a class and add it to your root style.css
> Notice the difference in accessing the item in above two examples. Also from v2.0.0 onwards index of the item is also available in the template similar to let-item="item" use let-i="index" and i will be the index variable available in the template.

Config

$3

* items: any[] - array of list items.
* name: string - List name that will be shown in the header.
* listStyle: any - list styles such as height, width.
* showHeader: boolean - flag to hide / show header default is true
* removeOnDropOutside: boolean - flag to enable remove items by dragging and dropping them outside the list. Default is false
* arrowKeySort: boolean - flag to enable sort using keyboard arrow keys. Example: Ctrl + ArrowDown moves item down
* commandKey: CommandKey - key type to use along with arrow keys for sorting e.g. ctrlKey/altKey. Default is ctrlKey

``
enum CommandKey {
CtrlKey = "ctrlKey",
ShiftKey = "shiftKey",
Altkey = "altKey",
MetaKey = "metaKey",
}
``
``
listStyle = {
width:'300px', //width of the list defaults to 300
height: '250px', //height of the list defaults to 250
}
``

$3

* listSorted($event): Event - when list is sorted emits listSorted event with updated order

> Where $event is the sorted list

* dragStart($event): Event - emitted when an item is seleceted and starts dragging
> Where $event:{
event: Javascript event,
itemIndex: current item index,
newIndex: -1,
item: selected item}


* dropped($event): Event - emitted when an item is dropped at the new index
> Where $event:{
event: Javascript event,
itemIndex: current item index,
newIndex: new item index,
item: selected item}


* moveDown($event): Event - emitted when an item is moved down in the list using the sort arrows
> Where $event:{
itemIndex: current item index,
newIndex: new item index,
item: selected item}

* moveUp($event): Event - emitted when an item is moved up in the list using sort arrows
> Where $event:{
itemIndex: current item index,
newIndex: new item index,
item: selected item}

* remove($event): Event - emitted when an item is removed from the list by dropping out, only works when removeOnDropOutside is set to true
> Where $event:{
itemIndex: current item index,
item: selected item}
`

Help Improve

Found a bug or an issue with this? Open a new issue here on GitHub.

Contributing to this project

Anyone and everyone is welcome to contribute. Please take a moment to
review the guidelines for contributing.

* Bug reports
* Feature requests
* Pull requests