Press "Enter" to skip to content

Angular Sortable with Hammerjs, Support SSR | ngx-hm-sortable

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

Attributenecessary(default)typepositiondescription
[ngx-hm-sortable]yesArraycontaineradd sortable by item array.
[elms-selector]yesStringcontainerthe sortable items selector
[move-selector]no (elms-selector)Stringcontainerthe move Anchor
[sortable-id]no / (random)Stringcontainerthe container unique id
[sortable-enable]no / (true)Booleancontainersortable enable state, default
[moving-class]nostringcontaineradd class with selected new element
[selected-class]nostringcontaineradd class with selected origin element.
(sort-complete)no(Array)=>voidcontainerwhen sortable complete, emit this new array
[attr.index]yesNumber(Integer)itemthe index of array

angular-material-table-sort

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

    Leave a Reply

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