A lightweight, reusable Angular signature pad component with canvas-based drawing
npm install @ngx-zone/signature-padbash
npm install @ngx-zone/signature-pad
`
Usage
$3
`typescript
import { Component } from '@angular/core';
import { SignaturePadComponent } from '@ngx-zone/signature-pad';
@Component({
selector: 'app-example',
standalone: true,
imports: [SignaturePadComponent],
template:
})
export class ExampleComponent {}
`
$3
`typescript
@Component({
selector: 'app-example',
standalone: true,
imports: [SignaturePadComponent],
template:
})
export class ExampleComponent {}
`
$3
`typescript
@Component({
selector: 'app-example',
standalone: true,
imports: [SignaturePadComponent],
template:
})
export class ExampleComponent {}
`
$3
`typescript
import { Component, ViewChild } from '@angular/core';
import { SignaturePadComponent } from '@ngx-zone/signature-pad';
@Component({
selector: 'app-example',
standalone: true,
imports: [SignaturePadComponent],
template:
})
export class ExampleComponent {
@ViewChild(SignaturePadComponent) signaturePad!: SignaturePadComponent;
async getSignature() {
// Get as Data URL
const dataUrl = this.signaturePad.getSignatureDataURL();
console.log('Data URL:', dataUrl);
// Get as Blob
const blob = await this.signaturePad.getSignatureBlob();
console.log('Blob:', blob);
// Programmatically clear
this.signaturePad.clear();
// Programmatically undo
this.signaturePad.undo();
}
}
`
Component API
$3
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| penColor | string | '#000' | The color of the pen stroke |
| backgroundColor | string | 'transparent' | The background color of the canvas |
| penSize | number | 10 | Base pen size (affected by pressure) |
| smoothing | boolean | true | Enable smooth curves for drawing |
| minWidth | number | 0.5 | Minimum stroke width |
| maxWidth | number | 2.5 | Maximum stroke width |
| height | number | 400 | Canvas height in pixels |
| showUndoButton | boolean | true | Show/hide undo button |
| showClearButton | boolean | true | Show/hide clear button |
| canvasBackgroundColor | string | undefined | Canvas background color (overrides CSS variable) |
| buttonBackgroundColor | string | undefined | Button background color (overrides CSS variable) |
| buttonTextColor | string | undefined | Button text color (overrides CSS variable) |
| buttonBorderColor | string | undefined | Button border color (overrides CSS variable) |
| buttonHoverColor | string | undefined | Button hover background color (overrides CSS variable) |
| buttonDisabledColor | string | undefined | Button disabled text color (overrides CSS variable) |
| buttonFocusColor | string | undefined | Button focus outline color (overrides CSS variable) |
| iconColor | string | undefined | Icon color (overrides CSS variable) |
$3
| Method | Return Type | Description |
|--------|-------------|-------------|
| undo() | void | Removes the last stroke |
| clear() | void | Clears all strokes from the canvas |
| savePNG() | void | Downloads the signature as a PNG file |
| getSignatureDataURL() | string | Returns the signature as a base64 data URL |
| getSignatureBlob() | Promise | Returns the signature as a Blob |
Theming
The component supports dynamic theming through two approaches:
$3
Define these CSS variables in your global styles (e.g., styles.scss) to theme all signature pads:
`scss
:root {
--ngx-sig-canvas-bg: #ffffff;
--ngx-sig-button-bg: #ffffff;
--ngx-sig-button-text: #334155;
--ngx-sig-button-border: #cbd5e1;
--ngx-sig-button-hover: #f1f5f9;
--ngx-sig-button-disabled: #94a3b8;
--ngx-sig-button-focus: #334155;
--ngx-sig-icon: #334155;
--ngx-sig-shadow-rgb: 0, 0, 0;
}
`
Example with Fuse Theme:
`scss
:root {
--ngx-sig-canvas-bg: var(--fuse-bg-card);
--ngx-sig-button-bg: var(--fuse-bg-card);
--ngx-sig-button-text: var(--fuse-text-default);
--ngx-sig-button-border: var(--fuse-border);
--ngx-sig-button-hover: var(--fuse-bg-hover);
--ngx-sig-button-disabled: var(--fuse-text-disabled);
--ngx-sig-button-focus: var(--fuse-primary);
--ngx-sig-icon: var(--fuse-icon);
--ngx-sig-shadow-rgb: var(--fuse-text-default-rgb);
}
`
Example with Material Theme:
`scss
:root {
--ngx-sig-canvas-bg: var(--mat-app-surface);
--ngx-sig-button-bg: var(--mat-app-surface);
--ngx-sig-button-text: var(--mat-app-on-surface);
--ngx-sig-button-border: var(--mat-app-outline);
--ngx-sig-button-hover: var(--mat-app-surface-container);
--ngx-sig-button-disabled: var(--mat-app-on-surface-variant);
--ngx-sig-button-focus: var(--mat-app-primary);
--ngx-sig-icon: var(--mat-app-on-surface-variant);
--ngx-sig-shadow-rgb: 0, 0, 0;
}
`
$3
Use Input properties to override colors for specific instances:
`typescript
[buttonBackgroundColor]="'#4f46e5'"
[buttonTextColor]="'#ffffff'"
[buttonBorderColor]="'#4338ca'"
[buttonHoverColor]="'#4338ca'"
[iconColor]="'#ffffff'">
`
Priority:
1. Input properties (highest priority)
2. CSS variables
3. No fallback - you must define the variables
Use Cases
$3
`typescript
[showClearButton]="false"
[height]="250"
>
`
$3
`typescript
Please sign below
[showUndoButton]="true"
[showClearButton]="true"
>
`
$3
`typescript
[penSize]="4"
>
`
Styling
The component adapts to its parent container width. Set a width on the parent element to control the signature pad size:
`html
`
You can also customize the appearance using CSS variables or by overriding the component styles.
Browser Support
- Modern browsers with Canvas API support
- Pointer Events API support
- ResizeObserver API support
Notes
- The canvas automatically scales to fit its parent container
- The component maintains signature quality during resize
- Touch action is disabled to prevent scrolling while drawing
- The component is standalone and can be used without a module
Building
To build the library, run:
`bash
ng build signature-pad
`
Publishing
1. Build the library:
`bash
ng build signature-pad
`
2. Navigate to the dist directory:
`bash
cd dist/signature-pad
`
3. Publish to npm:
`bash
npm publish
``