NgxSignaturePad
📦 Demo
Install
- NPM: npm i @mr-samani/ngx-signature-pad
- YARN: yarn add @mr-samani/ngx-signature-pad
Usage
Import NgxSignaturePadModule to your working module
import { NgxSignaturePadModule } from ' @mr-samani/ngx-signature-pad';
@NgModule({
imports: [
NgxSignaturePadModule
]
})
export class AppModule { }
html template:
<ngx-signature-pad #signaturePad (signature)="getSignature($event)"
[lineStroke]="3" [lineColor]="'#02cb93'"></ngx-signature-pad>
@Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| [height] | number | 240 | height of signature pad canvas |
| [width] | number | 240 | width of signature pad canvas |
| [lineStroke] | number | 3 | signature line size |
| [lineColor] | string | "#222222" | signature line color |
| [containerStyle] | string | "" | css style for customize signature canvas |
@Outputs \ Events
| Name | Type | Description |
|---|---|---|
| (signature) | EventEmitter<string> |
Return signature base64 image. Emits when the user mouse up or touch end |
clear signature pard
signaturePad.clearSignaturePad();
download signature pard
signaturePad.download();
get file of signature pard
signaturePad.getFile();