|
1 | | -# NgSortgrid |
2 | 1 |
|
3 | | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8. |
| 2 | + |
4 | 3 |
|
5 | | -## Development server |
| 4 | +# Getting started |
| 5 | +## Download the module |
6 | 6 |
|
7 | | -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. |
| 7 | +``` |
| 8 | +npm i -s ng-sortgrid |
| 9 | +``` |
8 | 10 |
|
9 | | -## Code scaffolding |
| 11 | +Import the ```NgsgModule``` in your ```AppModule```. |
10 | 12 |
|
11 | | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
| 13 | +``` |
| 14 | + ... |
| 15 | + imports: [BrowserModule, NgsgModule], |
| 16 | + ... |
| 17 | +``` |
12 | 18 |
|
13 | | -## Build |
| 19 | +## 1. Apply the directive |
| 20 | +Loop over your elements with *ngFor. 🛎️ the items needs to be an array. |
14 | 21 |
|
15 | | -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. |
| 22 | + |
16 | 23 |
|
17 | | -## Running unit tests |
| 24 | +Apply the ngSortgridItem directive |
18 | 25 |
|
19 | | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 26 | + |
20 | 27 |
|
21 | | -## Running end-to-end tests |
| 28 | +## 2. React on changes |
| 29 | +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. |
22 | 30 |
|
23 | | -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). |
| 31 | +Pass your items to the directive via the ngSortGridItems input. |
24 | 32 |
|
25 | | -## Further help |
| 33 | + |
| 34 | +React on the 'sorted' output events |
26 | 35 |
|
27 | | -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). |
| 36 | + |
| 37 | + |
| 38 | +## 3. Group sortgrids |
| 39 | +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. |
| 40 | +Pass in a unique name to the ngSortGridGroup input |
| 41 | + |
| 42 | + |
0 commit comments