Wednesday, July 15FreeJQuery

Angular 4+ Sortable List Components : ngx-sortable

Angular 4+ Sortable List Components ngx-sortable an angular 4 and above component for sorting list supporting drag and drop sort. ngx-sortable

Features of ngx-sortable

  • Custom template
  • Customizable
  • Drag and drop sorting
  • npm install ngx-sortable
  • import NgxSortableModule into your app.module;
import { NgxSortableModule } from 'ngx-sortable'
  • add NgxSortableModule to the imports of your NgModule:
  imports: [
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">

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


  • 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
  • Mcintyre Lawson
  • Burns Dalton
  • Amie Franklin
  • Jocelyn Horton
  • Fischer Erickson
  • Medina Underwood
  • Goldie Barber

For More Angular Jquery Plugins Click



Leave a Reply

Your email address will not be published. Required fields are marked *