Updated ReadME

README.md

@@ -10,7 +10,10 @@ Install with [npm](http://www.npmjs.com/):
 ```sh
 $ npm install ngx-dragdrop
 ```
-
+Note: For angular 4-5 projects, use ngx-dragdrop@^1.0.1
+```sh
+$ npm install ngx-dragdrop@^1.0.1
+```
 
 Add the ngx-dragdrop module as a dependency to your application module:
 
@@ -34,18 +37,18 @@ export class AppModule { }
 ## Usage
 #### Minimal Example
 ```html
-<div [ngx-draggable]="true"
-    [ngx-draggedClass]="'draggedClass'" 
-    [ngx-dragTag]="'dragType1'"
-    [ngx-dragData]="{a:4,b:6}">
+<div [ngxDraggable]="true"
+    [ngxDraggedClass]="'draggedClass'" 
+    [ngxDragTag]="'dragType1'"
+    [ngxDragData]="{a:4,b:6}">
 </div>
-<div (ngx-droppable)="onDrop($event)"
-    [ngx-dropData]="{dropObjectName:'foo'}"
-    [ngx-dropTags]="['dragType1','dragType2']">
+<div (ngxDroppable)="onDrop($event)"
+    [ngxDropData]="{dropObjectName:'foo'}"
+    [ngxDropTags]="['dragType1','dragType2']">
 </div>
 ```
 ```
-onDrop(event:{dragTag, dragData, dropData}){
+onDrop(event:IOnDropData}){
     
 }
 ```
@@ -54,60 +57,66 @@ onDrop(event:{dragTag, dragData, dropData}){
 ### Drag API
 #### `ngx-draggable`
 ```html
-<div [ngx-draggable]="true">
+<div [ngxDraggable]="true">
 ```
-If `ngx-draggable` is true, users will be able to drag the node/element.
+If `ngxDraggable` is true, users will be able to drag the node/element.
 
 
-#### `ngx-draggedClass`
+#### `ngxDraggedClass`
 ```html
-<div [ngx-draggable]="true" ngx-draggedClass="draggedCls">
+<div [ngxDraggable]="true" ngxDraggedClass="draggedCls">
 ```
-`ngx-draggedClass` allows you to add a class(draggedCls) when the drag on the element starts.
+`ngxDraggedClass` allows you to add a class(draggedCls) when the drag on the element starts.
 The class is removed from the node on dragend.
 
-#### `ngx-dragTag`
+#### `ngxDragTag`
 ```html
-<div [ngx-draggable]="true" ngx-dragTag="dragType1">
+<div [ngxDraggable]="true" ngxDragTag="dragType1">
 ```
-`ngx-dragTag` allows you to categorise elements into different drag types.
-A node of dragType 'foo' will only be droppable inside a node which has 'foo' in its `ngx-dropTags`
+`ngxDragTag` allows you to categorise elements into different drag types.
+A node of dragType 'foo' will only be droppable inside a node which has 'foo' in its `ngxDropTags`
 
 #### `ngx-dragData`
 ```html
-<div [ngx-draggable]="true" [ngx-dragData]="{a:4,b:6}">
+<div [ngxDraggable]="true" [ngxDragData]="{a:4,b:6}">
 ```
-`ngx-dragData` allows you to attach data to the draggable node.
->The data associated to `ngx-dragData` would be serialised while dragStar and put into the HTML5 dataTransfer object.
+`ngxDragData` allows you to attach data to the draggable node.
+>The data associated to `ngxDragData` would be serialised while dragStar and put into the HTML5 dataTransfer object.
 
 ### Drop API
-#### `ngx-droppable`
+#### `ngxDroppable`
 ```html
-<div (ngx-droppable)="onDrop($event)">
+<div (ngxDroppable)="onDrop($event)">
 ```
-if `ngx-droppable` is present, dragged elements can be dropped on them.
-If an `ngx-dragTag` is present on the dragged node, the same should be present in the `ngx-dropTags` array for drag to be allowed
+if `ngxDroppable` is present, dragged elements can be dropped on them.
+If an `ngxDragTag` is present on the dragged node, the same should be present in the `ngxDropTags` array for drag to be allowed
 
-#### `ngx-dropTags`
+#### `ngxDropTags`
 ```html
-<div (ngx-droppable)="onDrop($event)" [ngx-dropTags]="['foo','bar','dragType1', 'dragType3']">
+<div (ngxDroppable)="onDrop($event)" [ngxDropTags]="['foo','bar','dragType1', 'dragType3']">
 ```
-`ngx-dropTags` allows you to determine all the dragTag types that are allowed to be dropped on this node.
+`ngxDropTags` allows you to determine all the dragTag types that are allowed to be dropped on this node.
 This expects an array of strings
 
-#### `ngx-dropData`
+#### `ngxDropData`
 ```html
-<div (ngx-droppable)="onDrop($event)" [ngx-dropData]="{a:4,b:6}">
+<div (ngxDroppable)="onDrop($event)" [ngxDropData]="{a:4,b:6}">
 ```
-`ngx-dropData` allows you to attach data to the droppable node.
+`ngxDropData` allows you to attach data to the droppable node.
 
 #### Drop Event Object Interface
-The object that is passed to the dropHandler defined as the value for (ngx-droppable) has the following keys:
+The object that is passed to the dropHandler defined as the value for (ngxDroppable) is of type `IOnDropData` with following keys:
  ``dragTag, dragData, dropData``
- >Since the directives use HTML dataTransfer Object, the `ngx-dragData` is a copy(deserialized event dataTransfer object) of the original object, it is recommended that only uniquely identifying data for the dragged nodes be passed into `ngx-dragData` and the original object if needed, be retrieved using this information.
-
-## Build
-Check out `/src` for the original source code.
+ >Since the directives use HTML dataTransfer Object, the `ngxDragData` is a copy(deserialized event dataTransfer object) of the original object, it is recommended that only uniquely identifying data for the dragged nodes be passed into `ngxDragData` and the original object if needed, be retrieved using this information.
+
+## Contribute
+* Fork the repo
+* get your local git clone of the repo fork using `git clone ...`
+* Run `yarn install --pure-lockfile`
+* Run `yarn start` (You should have your local app running at http://localhost:4200)
+* Make fixes/changes
+* Commit and push to fork
+* Send pull request from GitHub
 
 ## License
 MIT