diff --git a/README.md b/README.md
index 5c6b592..0409ea6 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,7 @@ API is identical to [szimek/signature_pad](https://www.npmjs.com/package/signatu
Options are as per [szimek/signature_pad](https://www.npmjs.com/package/signature_pad) with the following additions:
* canvasWidth: width of the canvas (px)
* canvasHeight: height of the canvas (px)
-The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.
+ The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.
```typescript
@@ -36,20 +36,21 @@ import { SignaturePadModule } from '@almothafar/angular-signature-pad';
// then import for use in a component
import { Component, ViewChild } from '@angular/core';
-import { SignaturePad } from '@almothafar/angular-signature-pad';
+import { SignaturePadComponent } from '@almothafar/angular-signature-pad';
@Component({
- template: ''
+ template: ''
})
export class SignaturePadPage {
- @ViewChild(SignaturePad) signaturePad: SignaturePad;
+ @ViewChild('signature')
+ public signaturePad: SignaturePadComponent;
- private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
- 'minWidth': 5,
- 'canvasWidth': 500,
- 'canvasHeight': 300
+ private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
+ minWidth: 5,
+ canvasWidth: 500,
+ canvasHeight: 300
};
constructor() {
@@ -62,14 +63,15 @@ export class SignaturePadPage {
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
}
- drawComplete() {
+ drawComplete(event: MouseEvent | Touch) {
// will be notified of szimek/signature_pad's onEnd event
+ console.log('Completed drawing', event);
console.log(this.signaturePad.toDataURL());
}
- drawStart() {
+ drawStart(event: MouseEvent | Touch) {
// will be notified of szimek/signature_pad's onBegin event
- console.log('begin drawing');
+ console.log('Start drawing', event);
}
}
```
diff --git a/projects/angular-signature-pad/README.md b/projects/angular-signature-pad/README.md
index 6bf3eae..0409ea6 100644
--- a/projects/angular-signature-pad/README.md
+++ b/projects/angular-signature-pad/README.md
@@ -36,20 +36,21 @@ import { SignaturePadModule } from '@almothafar/angular-signature-pad';
// then import for use in a component
import { Component, ViewChild } from '@angular/core';
-import { SignaturePad } from '@almothafar/angular-signature-pad';
+import { SignaturePadComponent } from '@almothafar/angular-signature-pad';
@Component({
- template: ''
+ template: ''
})
export class SignaturePadPage {
- @ViewChild(SignaturePad) signaturePad: SignaturePad;
+ @ViewChild('signature')
+ public signaturePad: SignaturePadComponent;
- private signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
- 'minWidth': 5,
- 'canvasWidth': 500,
- 'canvasHeight': 300
+ private signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
+ minWidth: 5,
+ canvasWidth: 500,
+ canvasHeight: 300
};
constructor() {
@@ -62,14 +63,15 @@ export class SignaturePadPage {
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
}
- drawComplete() {
+ drawComplete(event: MouseEvent | Touch) {
// will be notified of szimek/signature_pad's onEnd event
+ console.log('Completed drawing', event);
console.log(this.signaturePad.toDataURL());
}
- drawStart() {
+ drawStart(event: MouseEvent | Touch) {
// will be notified of szimek/signature_pad's onBegin event
- console.log('begin drawing');
+ console.log('Start drawing', event);
}
}
```