Merge pull request #3 from leocaseiro/master

feat(Demo): Add Angular app Demo

Author: bradmartin

README.md

@@ -68,6 +68,58 @@ function clearUserDrawing(args) {
 exports.clearUserDrawing = clearUserDrawing;
 ```
 
+## Angular:
+```javascript
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {registerElement} from "nativescript-angular/element-registry";
+
+registerElement("DrawingPad", () => require("nativescript-drawingpad").DrawingPad);
+
+@Component({
+    selector: 'drawing-pad-example',
+    template: `
+    <ScrollView>
+        <StackLayout>
+            <DrawingPad #DrawingPad 
+            height="400" 
+            id="drawingPad" 
+            penColor="#ff4081" penWidth="3">
+            </DrawingPad>
+
+            <StackLayout orientation="horizontal">
+                <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
+                <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
+            </StackLayout>
+        </StackLayout>
+    </ScrollView>
+    `
+})
+export class DrawingPadExample {
+
+    @ViewChild("DrawingPad") DrawingPad: ElementRef;
+
+    getMyDrawing(args) {
+        // get reference to the drawing pad
+        let pad = this.DrawingPad.nativeElement;
+
+        // then get the drawing (Bitmap on Android) of the drawingpad
+        let drawingImage;
+        pad.getDrawing().then(function(data) {
+            console.log(data);
+            drawingImage = data;
+        }, function(err) {
+            console.log(err);
+        });
+    }
+
+    clearMyDrawing(args) {
+        var pad = this.DrawingPad.nativeElement;
+        pad.clearDrawing();
+    }
+}
+```
+
+
 ## Attributes
 **penColor - (color string)** - *optional*
 

demo/angular/app.ts

@@ -0,0 +1,15 @@
+import {Component} from "@angular/core";
+import {DrawingPadExample} from "./drawing-pad.component.ts";
+
+@Component({
+    selector: "app",
+    template: `
+     	<StackLayout>
+     	    <drawing-pad-example></drawing-pad-example>
+     	</StackLayout>
+    `
+})
+
+export class App {
+
+}

demo/angular/drawing-pad.component.ts

@@ -0,0 +1,47 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {registerElement} from "nativescript-angular/element-registry";
+
+registerElement("DrawingPad", () => require("nativescript-drawingpad").DrawingPad);
+
+@Component({
+    selector: 'drawing-pad-example',
+    template: `
+    <ScrollView>
+        <StackLayout>
+            <DrawingPad #DrawingPad 
+            height="400" 
+            id="drawingPad" 
+            penColor="#ff4081" penWidth="3">
+            </DrawingPad>
+
+            <StackLayout orientation="horizontal">
+                <Button text="Get Drawing" (tap)="getMyDrawing()"></Button>
+                <Button text="Clear Drawing" (tap)="clearMyDrawing()"></Button>
+            </StackLayout>
+        </StackLayout>
+    </ScrollView>
+    `
+})
+export class DrawingPadExample {
+
+    @ViewChild("DrawingPad") DrawingPad: ElementRef;
+
+    getMyDrawing(args) {
+        // get reference to the drawing pad
+        let pad = this.DrawingPad.nativeElement;
+
+        // then get the drawing (Bitmap on Android) of the drawingpad
+        let drawingImage;
+        pad.getDrawing().then(function(data) {
+            console.log(data);
+            drawingImage = data;
+        }, function(err) {
+            console.log(err);
+        });
+    }
+
+    clearMyDrawing(args) {
+        var pad = this.DrawingPad.nativeElement;
+        pad.clearDrawing();
+    }
+}

demo/angular/main.ts

@@ -0,0 +1,4 @@
+import {nativeScriptBootstrap} from "nativescript-angular/application";
+import {App} from "./App";
+
+nativeScriptBootstrap(App);

demo/angular/package.json

@@ -0,0 +1,27 @@
+{
+	"nativescript": {
+		"id": "org.nativescript.signaturepad",
+		"main": "main.js",
+		"tns-ios": {
+			"version": "2.0.0"
+		},
+		"tns-android": {
+			"version": "2.0.0"
+		}
+	},
+	"dependencies": {
+		"@angular/common": "2.0.0-rc.1",
+		"@angular/compiler": "2.0.0-rc.1",
+		"@angular/core": "2.0.0-rc.1",
+		"@angular/router-deprecated": "2.0.0-rc.1",
+		"@angular/platform-browser": "2.0.0-rc.1",
+		"@angular/platform-browser-dynamic": "2.0.0-rc.1",
+		"@angular/platform-server": "2.0.0-rc.1",
+		"nativescript-angular": "^0.1.1",
+		"nativescript-drawingpad": "file:..",
+		"tns-core-modules": "latest"
+	},
+	"devDependencies": {
+		"nativescript-dev-typescript": "^0.3.2"
+	}
+}

package.json

@@ -28,6 +28,13 @@
     "email": "[email protected]",
     "url": "https://github.com/bradmartin"
   },
+  "contributors": [
+    {
+      "name": "Leo Caseiro",
+      "email": "[email protected]",
+      "url": "https://github.com/leocaseiro"
+    },
+  ],
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/bradmartin/nativescript-drawingpad/issues"