Skip to content
This repository was archived by the owner on Apr 12, 2022. It is now read-only.

wulfsolter/angular2-signaturepad

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a016054 · Apr 12, 2022
Nov 22, 2021
Nov 26, 2020
Nov 22, 2021
Oct 5, 2016
Jan 29, 2016
Apr 12, 2022
Nov 22, 2021
Oct 5, 2016
Feb 14, 2022
Feb 11, 2022
Jan 19, 2020
Nov 26, 2020
Nov 26, 2020

Repository files navigation

angular2-signaturepad

Angular 2 component for szimek/signature_pad.

No Longer Maintained

<< THIS IS NO LONGER IN USE BY OWNER. PROBLEMS CAN AND DO EXIST. PRs ARE SUPER WELCOME, BUT I CAN NOT IDENTIFY WHAT YOUR ISSUES ARE, NOR WILL I CHANGE THINGS BECAUSE ANGULAR HAS CHANGED IN THE YEARS SINCE I WROTE THIS. I DO NOT USE THIS, I CAN'T HELP YOU WITH YOUR PROBLEMS. >>

Install

npm install angular2-signaturepad --save

Reference Implementation

Usage example

API is identical to szimek/signature_pad.

Options are as per szimek/signature_pad with the following additions:

  • canvasWidth: width of the canvas (px)
  • canvasHeight: height of the canvas (px) The above options are provided to avoid accessing the DOM directly from your component to adjust the canvas size.
// import into app module

import { SignaturePadModule } from 'angular2-signaturepad';

...

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

// then import for use in a component

import { Component, ViewChild } from 'angular2/core';
import { SignaturePad } from 'angular2-signaturepad/signature-pad';

@Component({
  template: '<signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>'
})

export class SignaturePadPage{

  @ViewChild(SignaturePad) signaturePad: SignaturePad;

  signaturePadOptions: Object = { // passed through to szimek/signature_pad constructor
    'minWidth': 5,
    'canvasWidth': 500,
    'canvasHeight': 300
  };

  constructor() {
    // no-op
  }

  ngAfterViewInit() {
    // this.signaturePad is now available
    this.signaturePad.set('minWidth', 5); // set szimek/signature_pad options at runtime
    this.signaturePad.clear(); // invoke functions from szimek/signature_pad API
  }

  drawComplete() {
    // will be notified of szimek/signature_pad's onEnd event
    console.log(this.signaturePad.toDataURL());
  }

  drawStart() {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('begin drawing');
  }
}

About

Angular2 Component for szimek / signature_pad

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published