An angular wrapper for signature_pad.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @ng-plus/signature-pad in KB


Angular Signature Pad

See Demo on Stackblitz


npm install @ng-plus/signature-pad --save

Usage (Blob/Image):

<ng-signature-pad (done)="saveImage($event)"></ng-signature-pad>


saveImage(blob: Blob) {
    // Do something with the blob.


Directives Description Options Default
[editable] Turn pad on or off true, false true
[emitOnDragEnd] Emit the (done) method as soon as drag end. true, false false
[penColor] Color of signature pen Color black
[backgroundColor] Background of signature pad Color transparent
(done) Fired on clicking Done button function($event: Blob/base64/json) null
(clear) Fired on clicking Clear button function() null
[(points)] JSON points model json null
[format] Output format foe (done) method. json output is same as points model. blob, base64, json blob
[width] Width of canvas number 600
[height] Height of canvas number 150
[responsive] Resize to 100% parent. But the points will still output widthxheight ratio true, false true
[showDoneButton] Show or Hide Done Button true, false true
[showClearButton] Show or Hide Clear Button true, false true
[doneButtonText] Text of Done Button string Done
[clearButtonText] Text of Clear Button string Clear
[doneButtonClass] Class classes of Done Button string btn btn-primary
[clearButtonClass] Class classes of Clear Button string btn btn-default

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.