angular16-signaturepad
Angular 16 component for szimek/signature_pad. just update angular versions See commit on GitHub for more
Install
npm install angular16-signaturepad --save
Maintenance
Will try to update once a year( on summer when there is less customer ;) ) every 2 versions of angular
PAST Angular 13-
<< JUST A SIMPLE FORK THANKS TO szimzk and wulfsolter >>
angular2-signaturepad
Angular 2 component for szimek/signature_pad.
No Longer Maintained
<< THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS. I DO NOT USE THIS, I CAN'T HELP YOU WITH YOUR PROBLEMS. >>
Install
npm install angular2-signaturepad --save
Reference Implementation
Usage example
API is identical to szimek/signature_pad.
Options are as per szimek/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.
// import into app module
import { SignaturePadModule } from 'angular2-signaturepad';
...
@NgModule({
declarations: [ ],
imports: [ SignaturePadModule ],
providers: [ ],
bootstrap: [ AppComponent ]
})
// then import for use in a component
import { Component, ViewChild } from 'angular2/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';
@Component({
template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
})
export class SignaturePadPage{
@ViewChild(SignaturePad) signaturePad: SignaturePad;
signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
'minWidth': 5,
'canvasWidth': 500,
'canvasHeight': 300
};
constructor() {
// no-op
}
ngAfterViewInit() {
// this.signaturePad is now available
this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
}
drawComplete() {
// will be notified of szimek/signature_pad's onEnd event
console.log(this.signaturePad.toDataURL());
}
drawStart() {
// will be notified of szimek/signature_pad's onBegin event
console.log('begin drawing');
}
}