NGX-HM-Sortable is an angular 5+ Drag’drop that supports the server-side. Angular sortable with Hammerjs, SSR Support (server-side rendering).
kendo sortable angular, table sorting in angular, mat sort angular, kendo sortable angular disabled, progresskendo angular sortable, angular material table sort
How to make use of it:
Install:
npm install ngx-hm-sortable
Usage
import { NgxHmSortableModule } from 'ngx-hm-sortable'; @NgModule({ declarations: [ ...something... ], imports: [ ...something... , NgxHmSortableModule], providers: [ ...something... ], bootstrap: [ ...something... ] }) export class YourModule { ...something... }
import { Component } from '@angular/core'; @Component({ ... something ... }) export class YourComponent { list = [1, 2, 3, 4, 5]; }
<table> <tbody [ngx-hm-sortable]="list" elms-selector=".item" move-selector=".drag" selected-class="color-blue" moving-class="color-red" (sort-complete)="complete($event)"> <tr> <th>sortable</th> <th>number</th> </tr> <tr *ngFor="let item of list; let i = index;" [attr.index]="i" class="item"> <td> <span class="drag">dragMe!</span> </td> <td>{{item}}</td> </tr> </tbody> </table>
Attribute
Attribute | necessary(default) | type | position | description |
---|---|---|---|---|
[ngx-hm-sortable] | yes | Array | container | add sortable by item array. |
[elms-selector] | yes | String | container | the sortable items selector |
[move-selector] | no (elms-selector) | String | container | the move Anchor |
[sortable-id] | no / (random) | String | container | the container unique id |
[sortable-enable] | no / (true) | Boolean | container | sortable enable state, default |
[moving-class] | no | string | container | add class with selected new element |
[selected-class] | no | string | container | add class with selected origin element. |
(sort-complete) | no | (Array)=>void | container | when sortable complete, emit this new array |
[attr.index] | yes | Number(Integer) | item | the index of array |
sortable component for angular, ngx-hm-sortable Plugin/Github
See Demo And Download
Official Website(ZouYouShun): Click Here
This superior jQuery/javascript plugin is developed by ZouYouShun. For extra advanced usage, please go to the official website.
Be First to Comment