Skip to content

Commit ff1b856

Browse files
committed
docs(readme): adjust README.md
1 parent 79338b8 commit ff1b856

2 files changed

Lines changed: 29 additions & 14 deletions

File tree

README.md

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,42 @@
1-
# NgSortgrid
21

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
2+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
43

5-
## Development server
4+
# Getting started
5+
## Download the module
66

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+
```
810

9-
## Code scaffolding
11+
Import the ```NgsgModule``` in your ```AppModule```.
1012

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+
```
1218

13-
## Build
19+
## 1. Apply the directive
20+
Loop over your elements with *ngFor. 🛎️ the items needs to be an array.
1421

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+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/gs1.png)
1623

17-
## Running unit tests
24+
Apply the ngSortgridItem directive
1825

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
26+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/gs2.png)
2027

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

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

25-
## Further help
33+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/gs3.png)
34+
React on the 'sorted' output events
2635

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+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/gs4.png)
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+
![Grid demo](./projects/ng-sortgrid-demo/src/assets/gs5.png)
356 KB
Loading

0 commit comments

Comments
 (0)