Nicely Presented Misnomer

    ngx-sortable
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.0 • Public • Published

    ngx-sortable

    GitHub license 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

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

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

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

    Install

    npm i ngx-sortable

    DownloadsWeekly Downloads

    1,644

    Version

    2.1.0

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    21

    Last publish

    Collaborators

    • manishjanky