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

Examples

• demo-page

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

    <ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">         <ng-template let-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

Config

Input

• 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.

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

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