ngx-sortable
v2.1.0
Published
An angular 4 and above component for sorting list supporting drag and drop sort.
Downloads
8,772
Maintainers
Readme
ngx-sortable
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
Installation
npm install ngx-sortable
Using with webpack and tsc builds/ angular-cli builds
- 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
<ngx-sortable></ngx-sortable>
in your templates to add sortable list in your view
Deprecated
<ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item>
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>
v2.0.0
onwards use below
<ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item="item">
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>
Where content inside <ng-template> </ng-template>
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 fromv2.0.0
onwards index of the item is also available in the template similar tolet-item="item"
uselet-i="index"
andi
will be the index variable available in the template.
Config
Input
items: any[]
- array of list items.name: string
- List name that will be shown in the header.listStyle: any
- list styles such asheight, width
.showHeader: boolean
- flag to hide / show header default is trueremoveOnDropOutside: boolean
- flag to enable remove items by dragging and dropping them outside the list. Default is falsearrowKeySort: boolean
- flag to enable sort using keyboard arrow keys. Example: Ctrl + ArrowDown moves item downcommandKey: 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
}
Output
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 whenremoveOnDropOutside
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.