Have ideas to improve npm?Join in the discussion! »

    ng-sign-pad
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    ng-sign-pad

    Angular 10 upgrade of angular2-signaturepad.

    Install

    npm install ng-sign-pad --save

    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 ng-sign-pad

    DownloadsWeekly Downloads

    16

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    68.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar