/AngularSignatureComponent

Angular Signature Component

Primary LanguageTypeScriptMIT LicenseMIT

Angular Signature Component

Minimalist signature component for Angular

Getting Started

Copy signature.component.ts in your project (and add it to the declaration of your module-s). Tweak for your needs.

Usage

<!-- This is a place where the signature pad should be used. -->
<!-- The signature canvas will fill the whole space. In the example, full width and a height of 100px. -->
<div style="border: 1px solid gray; width: 100%; height: 100px;">
  <!-- When calling "save", the $event received from the component output is your image as a default data URL as PNG -->
  <app-signature (savedSignatureAsDataUrl)="someServiceThatHandlesTheData($event)" #myAwesomeSignaturePad></app-signature>
</div>

<!-- There are two functions: clear and save. -->
<button (click)="myAwesomeSignaturePad.clear()">Clear</button>
<button (click)="myAwesomeSignaturePad.save()">Save</button>

Demo

Plunker