bs-signature-pad captures freehand strokes on a canvas and emits them as a structured Signature value through the [(signature)] two-way binding. Freehand drawing has no keyboard equivalent, so the pad ships a typed-signature alternative: the text input below the canvas renders its value in a script font and stores it on Signature.text. Undo and Clear are regular buttons in the tab order, and pointer coordinates stay correct when the canvas is CSS-sized (e.g. width: 100%).
<bs-signature-pad [width]="500"
[height]="300"
[(signature)]="signature"
(signatureChange)="onSignatureChange($event)">
</bs-signature-pad>
<button type="button" (click)="resetSignature()">Reset</button>
import { Component } from '@angular/core';
import {
BsSignaturePadComponent,
Signature,
} from '@mintplayer/ng-bootstrap/signature-pad';
@Component({
selector: 'my-signature-pad-demo',
templateUrl: './my-signature-pad-demo.component.html',
imports: [BsSignaturePadComponent],
})
export class MySignaturePadDemoComponent {
protected signature: Signature = { strokes: [] };
onSignatureChange(ev: Signature) {
console.log('new signature', ev);
}
resetSignature() {
this.signature = { strokes: [] };
}
}
Template-driven [(ngModel)] and reactive [formControl] both bind through the component's ControlValueAccessor: the value, the disabled state, and touched when focus leaves.
"0 stroke(s)""0 stroke(s)"
<!-- template-driven (FormsModule) -->
<bs-signature-pad [width]="300" [height]="150" [(ngModel)]="value"></bs-signature-pad>
<!-- reactive (ReactiveFormsModule): control = new FormControl(...) -->
<bs-signature-pad [width]="300" [height]="150" [formControl]="control"></bs-signature-pad>