Angular Signature Pad


Angular component for szimek/signature_pad.

✨ Now supports Angular 20! Built with standalone components and modern Angular best practices.

Install

``shell
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.

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

@Component({
selector: 'app-signature',
standalone: true,
imports: [SignaturePadComponent],
template: ''
})
export class SignaturePadPage {

@ViewChild('signature')
public signaturePad: 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);
}
}
`

$3

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

Before (v6.x):
`typescript
import { AngularSignaturePadModule } from '@almothafar/angular-signature-pad';

@NgModule({
imports: [AngularSignaturePadModule]
})
`

After (v7.x):
`typescript
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

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

Or if you're still using NgModule:
`typescript
import { SignaturePadComponent } from '@almothafar/angular-signature-pad';

@NgModule({
imports: [SignaturePadComponent]
})
``