NgxSignaturePad

🎉 Create signature pad for angular projects

📦Demo

🚀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();

Author

💻Mohammadreza samani | FrontEnd Developer

❤️Buy me a coffee 😉