I'm installed 'npm install angular2-signaturepad --save'.
Angular CLI: 10.1.5.
I am getting this error.
How to fix?
I tried to fix this.
npm install angular2-signaturepad@latest
Install and update the 'angular2-signaturepad' library.
Then tried importing SignaturePad,AngularSignaturePadModule.forRoot() and SignaturePadModule.forRoot() into app.module.ts
I did as in this blog. That's right.
npm install @almothafar/angular-signature-pad --save
ng generate component signaturePad
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SignaturePadComponent } from './component/shared/signature-pad/signature-pad.component';
@NgModule({
declarations: [
AppComponent,
SignaturePadComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import SignaturePad from 'signature_pad';
@Component({
selector: 'app-signature-pad',
templateUrl: './signature-pad.component.html',
styleUrls: ['./signature-pad.component.scss']
})
export class SignaturePadComponent implements OnInit {
signatureNeeded!: boolean;
signaturePad!: SignaturePad;
@ViewChild('canvas') canvasEl!: ElementRef;
signatureImg!: string;
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit() {
this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
}
startDrawing(event: Event) {
// works in device not in browser
}
moved(event: Event) {
// works in device not in browser
}
clearPad() {
this.signaturePad.clear();
}
savePad() {
const base64Data = this.signaturePad.toDataURL();
this.signatureImg = base64Data;
this.signatureNeeded = this.signaturePad.isEmpty();
if (!this.signatureNeeded) {
this.signatureNeeded = false;
}
}
}
<h4>Please Add your signature here</h4>
<canvas
#canvas
(touchstart)="startDrawing($event)"
(touchmove)="moved($event)"
width="150"
height="100"
></canvas>
<p class="error-message" *ngIf="signatureNeeded">Signature is required</p>
<div class="buttons flex justify-between">
<button (click)="clearPad()">Clear</button>
<button (click)="savePad()">Submit the signature</button>
</div>
<div *ngIf="signatureNeeded === false">
<p>Signature in Base64Encoded Format</p>
<img src="{{ signatureImg }}" alt="" srcset="" />
</div>