Signature pad component for Angular 2.x and above.

angular2-signature-pad

angular2 Signature Pad

Stars : 10

Forks : 10

Created by Dimpu Aravind Buddha

bower install angular2-signature-pad

Demo Download GitHub

Angular 2 SignaturePad

Build Status npm version npm npm

Source @ https://github.com/dimpu/angular2-signature-pad

Table of contents

  1. Getting Started
  2. Installation instructions
  3. Usage & Demo
  4. Contributing
  5. License

Getting Started

angular2-signature-pad contains SignaturePadModule for Angular 2.

Additionally we use signature_pad for this component.

Installation instructions

Install angular2-signature-pad from npm:

npm install angular2-signature-pad --save

or using yarn:

yarn add angular2-signature-pad

How to use it with:

Usage & Demo

Main source of API documentation and usage scenarios is available at https://dimpu.github.io/angular2-signature-pad/.

Contribution

Is very welcome! And remember, contribution is not only PRs and code, but any help with docs or helping other developers to solve issues are very appreciated! Thanks in advance!

Quick Guide

app.module.js

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SignaturePadModule } from 'angular2-signature-pad';
import { AppComponent } from '../src/app.component';

@NgModule({
  imports: [
    BrowserModule,
    SignaturePadModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

app.component.html

<signature-pad 
        (onSave)="onSaveHandler($event)" 
        (onClear)="onClearHandler()" 
        [width]="width" 
        [height]="height" 
        [hideFooter]="noFooter" 
        [label]="label"></signature-pad>

Example

You can find a working example inside the demo directory.

To serve it locally, run:

git clone https://github.com/dimpu/angular2-signature-pad.git

npm i

npm run demo.serve

Related posts:

Javscript

Javascript plugin

Angular-js