Demo

• Getting started
  • Download the module
  • Apply the directive
  • React on changes
• API
  • Inputs
  • Outputs

npm i -s ng-sortgrid

Import the NgsgModule in your AppModule.

  import {NgsgModule} from 'ng-sortgrid'
  ...
  @NgModule({
    imports: [BrowserModule, NgsgModule],
    //...
  })  
  ...

Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe to pass in your items.

Apply the ngSortgridItem directive

In most cases you are interested in the new sort order. Often you want to store them in local storage or even send them to the backend. To do so the following two steps are needed in addition to the "Getting started" step.

Pass your items to the directive via the ngSortGridItems input.

React on the 'sorted' output event. The sorted output event emits a NgsgOrderChange which contains the previousOrder and the currentOrder

In case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from one group in another group. Pass in a unique name to the ngSortGridGroup input

You can also use the async pipe to display items

The ng-sortgrid adds different classes on different events to your items. You can either use those classes to style the appereance of your items on certain events or you can include the build in CSS from the ng-sortgrid library.

To integrate the built in Stylesheet just import in in your angular.json.

    "styles": [
              "node_modules/ng-sortgrid/styles/ngsg.css",
            ],

Alternative you can provide custom styles for the different classes listed bellow

The ng-sortgrid has a autoScroll flag which you can use to enable autoScroll. If you enable autoScroll the screen will start to scroll in the following scenario.

• If you drag an element in the top 50px of the screen
• If you drag an element in the bottom 50px of the screen

Sometimes its not enough to onyl scroll once you drag over the top view port border. Imagine that you have a fixed navbar at the top of your page. In this case you need to scroll once you drag an element over the navbar.

The scrollSpeed property accepts a number and allows you to specify the scrolling speed.

Check out the scroll demo