‚̧Net Possibility Multiplier
    Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

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

    1.41.1¬†‚Äʬ†Public¬†‚Äʬ†Published

    angular5-signaturepad

    Angular 5 component for szimek/signature_pad.

    << This is fork of wulfsolter/angular2-signaturepad ported to angular 5 >>

    Install

    npm install angular5-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 angular5-signaturepad

    DownloadsWeekly Downloads

    14

    Version

    1.41.1

    License

    MIT

    Unpacked Size

    36.2 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar