Wondering what’s next for npm?Check out our public roadmap! »

    angular2-signaturepad
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.4 • Public • Published

    angular2-signaturepad

    Angular 2 component for szimek/signature_pad.

    << 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 >>

    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;
    
      private 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');
      }
    }

    Install

    npm i angular2-signaturepad

    DownloadsWeekly Downloads

    17,414

    Version

    3.0.4

    License

    MIT

    Unpacked Size

    63.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar
    • avatar