angular-signature-pad

This project provides components and utils for digital signatures. Use it to draw smooth signatures based on HTML5 canvas and uses variable width Bézier curve interpolation. [SignaturePad](https://github.com/szimek/signature_pad) is used a the vanilla i

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-signature-pad
5060.0.145 years ago5 years agoMinified + gzip package size for angular-signature-pad in KB

Readme

Angular SignaturePad
This project provides components and utils for digital signatures. Use it to draw smooth signatures based on HTML5 canvas and uses variable width Bézier curve interpolation. SignaturePad is used a the vanilla implementation.
Angular-Signature-Pad
DEMO

Quick code example

// app.component.html
<signature-pad [config]="{penColor:red}" #sP></signature-pad>
<button (click)="sp.clear()">CLEAR</button>

Installing

  1. Load library
$ npm install angular-signature-pad --save

  1. Import module
// src/app/app.module.ts
...
// IMPORT YOUR LIBRARY
import { AngularSignaturePadModule } from 'angular-signature-pad';

@NgModule({
  imports: [
    ...
    AngularSignaturePadModule.forRoot()
  ]
  ...
})
export class AppModule { }

  1. Use Component
// src/app/app.component.html
<signature-pad #sigPad></signature-pad>

<b>value:</b>
<pre>
  {{sigPad.value | json}}
</pre>

<button (click)="sigPad.clear()">Clear</button>

Styles

To apply the default styles just import the styles.scss file from the node_modules/angular-signature-pad folder.
// src/styles.scss

@import "../node_modules/angular-signature-pad/styles";

Custom styles

The SignaturePadCard and SignaturePadCardGroup component have a default styling set over the [theme] property.
It is applied over the .raised class internally.
To create your own theme create a class i.e. .my-theme and combine
it with the default class of the signature pad. .signature-pad-card.my-theme. Apply it to the component over the [theme] property binding.
  1. Create styles
.signature-pad-card.my-theme {
  ...

  .signature-pad {
    ...
  }

  .signature-pad-canvas {
    ...
  }

  .actions {
    ...
    .clear {
     ...
    }
  }

  .feedback {
   ... 
  }
}

  1. Apply styles to the theme property binding
<signature-pad-card [theme]="'my-theme'" ></signature-pad-card>

Components

Validators