🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

ngx-sortable is an angular 4 and above component for sorting list supporting drag and drop sort.Features:Custom templateCustomizableDrag and drop sorting

Drag_Drop Plugins

Documentation

ngx-sortable

GitHub license npm Build Status 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

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


You May Also Like