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

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

    0.0.10 • Public • Published

    ngx-signaturepad

    GitHub npm (tag)

    Fork of wulfsolter/angular2-signaturepad.

    Install

    npm install ngx-signaturepad --save

    Reference Implementation

    • Live Demo - angular2-signaturepad Demo
    • Source - angular2-signaturepad Demo

    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 'ngx-signaturepad';
    
    ...
    
    @NgModule({
      declarations: [ ],
      imports: [ SignaturePadModule ],
      providers: [ ],
      bootstrap: [ AppComponent ]
    })
    
    // then import for use in a component
    
    import { Component, ViewChild } from '@angular/core';
    import { SignaturePad } from 'ngx-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 ngx-signaturepad

    DownloadsWeekly Downloads

    631

    Version

    0.0.10

    License

    MIT

    Unpacked Size

    35.3 kB

    Total Files

    17

    Last publish

    Collaborators

    • avatar