ang-signature-pad

A modern Angular 19+ signature pad component with signal-based reactivity, zoneless support, and reactive forms integration.

Features

• ✅ Angular 19+ - Built for the latest Angular with modern APIs
• ✅ Signal-based - Uses Angular signals for reactive state management
• ✅ Zoneless Support - Works with provideExperimentalZonelessChangeDetection()
• ✅ Standalone Component - No module required, just import and use
• ✅ Reactive Forms - Full ControlValueAccessor implementation
• ✅ Responsive - Auto-resizes to container with high DPI support
• ✅ Touch Support - Works on mobile and tablet devices
• ✅ Dark Mode - Built-in dark mode support
• ✅ Customizable - Pen color, width, background, and more

Installation

npm install ang-signature-pad

Usage

Basic Usage

import { Component, viewChild } from '@angular/core';
import { AngSignaturePadComponent } from 'ang-signature-pad';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [AngSignaturePadComponent],
  template: `
    <ang-signature-pad #signaturePad></ang-signature-pad>
    <button (click)="save()">Save</button>
    <button (click)="clear()">Clear</button>
  `
})
export class AppComponent {
  readonly signaturePad = viewChild.required<AngSignaturePadComponent>('signaturePad');

  save() {
    const dataUrl = this.signaturePad().toDataURL();
    console.log(dataUrl);
  }

  clear() {
    this.signaturePad().clear();
  }
}

With Reactive Forms

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AngSignaturePadComponent } from 'ang-signature-pad';

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [ReactiveFormsModule, AngSignaturePadComponent],
  template: `
    <ang-signature-pad [formControl]="signatureControl"></ang-signature-pad>
  `
})
export class FormComponent {
  signatureControl = new FormControl<string>('');
}

With Custom Options

import { Component } from '@angular/core';
import { AngSignaturePadComponent, SignaturePadOptions } from 'ang-signature-pad';

@Component({
  selector: 'app-custom',
  standalone: true,
  imports: [AngSignaturePadComponent],
  template: `
    <ang-signature-pad
      [options]="signatureOptions"
      [responsive]="true"
      [showClearButton]="true"
      placeholder="Please sign here"
      (drawStart)="onDrawStart($event)"
      (drawEnd)="onDrawEnd($event)"
      (cleared)="onCleared()">
    </ang-signature-pad>
  `
})
export class CustomComponent {
  signatureOptions: SignaturePadOptions = {
    minWidth: 0.5,
    maxWidth: 2.5,
    penColor: '#000000',
    backgroundColor: 'rgba(255, 255, 255, 0)'
  };

  onDrawStart(event: MouseEvent | TouchEvent) {
    console.log('Drawing started');
  }

  onDrawEnd(event: MouseEvent | TouchEvent) {
    console.log('Drawing ended');
  }

  onCleared() {
    console.log('Signature cleared');
  }
}

API

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | options | SignaturePadOptions | {} | Signature pad configuration options | | width | number | 400 | Canvas width (when not responsive) | | height | number | 200 | Canvas height (when not responsive) | | responsive | boolean | true | Auto-resize to container | | showClearButton | boolean | true | Show built-in clear button | | placeholder | string | 'Sign here' | Placeholder text |

Outputs

| Output | Type | Description | |--------|------|-------------| | drawStart | MouseEvent \| TouchEvent | Emitted when drawing starts | | drawEnd | MouseEvent \| TouchEvent | Emitted when drawing ends | | cleared | void | Emitted when signature is cleared |

SignaturePadOptions

interface SignaturePadOptions {
  dotSize?: number;
  minWidth?: number;
  maxWidth?: number;
  throttle?: number;
  minDistance?: number;
  backgroundColor?: string;
  penColor?: string;
  velocityFilterWeight?: number;
}

Public Methods

| Method | Returns | Description | |--------|---------|-------------| | clear() | void | Clear the signature | | isEmpty() | boolean | Check if signature is empty | | toDataURL(type?, encoderOptions?) | string | Get signature as data URL | | toPNG() | string | Get signature as PNG data URL | | toJPEG(quality?) | string | Get signature as JPEG data URL | | toSVG() | string | Get signature as SVG data URL | | toData() | PointGroup[] | Get signature data as point groups | | fromDataURL(dataUrl, options?) | Promise<void> | Load signature from data URL | | fromData(pointGroups) | void | Load signature from point groups | | on() | void | Enable drawing | | off() | void | Disable drawing |

Properties

| Property | Type | Description | |----------|------|-------------| | penColor | string | Get/set pen color | | backgroundColor | string | Set background color |

Styling

The component uses :host display block and fills its container. Wrap it in a sized container:

<div style="width: 100%; height: 200px;">
  <ang-signature-pad></ang-signature-pad>
</div>

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers with touch support

License

MIT © Pawan Kumar Kumawat

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request