@almothafar/angular-signature-pad

Angular Signature Pad

Angular component for szimek/signature_pad.

Install

npm install @almothafar/angular-signature-pad --save

Reference Implementation

• Live Demo
• Source

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 { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';

...

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

// then import for use in a component

import { Component, ViewChild } from '@angular/core';
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@Component({
  template: '<signature-pad #signature [options]="signaturePadOptions" (drawStart)="drawStart($event)" (drawEnd)="drawComplete($event)"></signature-pad>'
})

export class SignaturePadPage {

  @ViewChild('signature')
  public signaturePad: SignaturePadComponent;

  private signaturePadOptions: NgSignaturePadOptions = { // 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(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onEnd event
    console.log('Completed drawing', event);
    console.log(this.signaturePad.toDataURL());
  }

  drawStart(event: MouseEvent | Touch) {
    // will be notified of szimek/signature_pad's onBegin event
    console.log('Start drawing', event);
  }
}

Changelog

6.0.0

• BREAKING redrawCanvas() does not auto-clear data anymore; clear will be called internally, but still preserving data. You can return to the previous behavior by calling clear() after redrawCanvas() if you want it.
• BREAKING clear() will call redrawCanvas() first. If you just want to clear data without redrawing, then call clear(false). This behavior is to fix issues where the pad loses the style after clearing data.
• BREAKING clear() will trigger drawEnd with the value of null, this can help with knowing when the pad got cleared.
• Adding new changeBackgroundColor(color: string) function to change the background color dynamically.
• New Demo UI and fixing broken showcase.
• Upgrade signature_pad to the latest version (5.0.4) See (Changelog)
• Support Angular 18 (Now it supports Angular >= 16; if any issues occur in the future, please report).
• Update dependencies for the project