Angular Signature Pad

Angular component for szimek/signature_pad.

✨ Now supports Angular 21! Built with standalone components and modern Angular signal APIs.

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 { Component, viewChild } from '@angular/core';
import { SignaturePadComponent, NgSignaturePadOptions } from '@almothafar/angular-signature-pad';

@Component({
  selector: 'app-signature',
  standalone: true,
  imports: [SignaturePadComponent],
  template: `
    <signature-pad
      [options]="signaturePadOptions"
      (drawStart)="drawStart($event)"
      (drawEnd)="drawComplete($event)"
      (drawClear)="drawCleared()" />
  `
})
export class SignaturePadPage {

  public signaturePad = viewChild(SignaturePadComponent);

  public signaturePadOptions: NgSignaturePadOptions = { // passed through to szimek/signature_pad constructor
    minWidth: 5,
    canvasWidth: 500,
    canvasHeight: 300
  };

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

  drawCleared() {
    // will be notified when clear() is called on the pad
    console.log('Pad cleared');
  }
}

Migration from v8.x to v9.x

Angular 19 dropped — minimum peer dependency is now Angular 20.0.0+.

drawEnd no longer emits null on clear. If you were checking for a null event in your drawEnd handler to detect when the pad was cleared, switch to the new dedicated drawClear output:

Before (v8.x):

<signature-pad (drawEnd)="onDrawEnd($event)"></signature-pad>

onDrawEnd(event: MouseEvent | Touch | null) {
  if (!event) {
    // pad was cleared
  }
}

After (v9.x):

<signature-pad (drawEnd)="onDrawEnd($event)" (drawClear)="onDrawCleared()" />

onDrawEnd(event: MouseEvent | Touch) { }

onDrawCleared() {
  // pad was cleared
}

options is now a model() signal, enabling optional two-way binding:

<!-- one-way (as before) -->
<signature-pad [options]="myOptions" />

<!-- two-way (new) -->
<signature-pad [(options)]="myOptions" />

Migration from v6.x to v7.x

In v7.x, the component is now standalone. Update your imports:

Before (v6.x):

import { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';

@NgModule({
  imports: [AngularSignaturePadModule]
})

After (v7.x):

import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@Component({
  standalone: true,
  imports: [SignaturePadComponent]
})

Or if you're still using NgModule:

import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@NgModule({
  imports: [SignaturePadComponent]
})