Signaturepad clear property not clearing in modal-bootstrap dialog box - html

Question

I am working on signature pad dialogue box and for the dialogue box i am using bootstrap modal. In this activity when i click on complete activity a dialogbox should open asking yes or no on clicking yes a dialog box with signaturepad in modal body and clear button in modal footer.
the problem is when clicking on clear button from modal footer the clear method of signaturepad module is not working Any suggestions would be of great help
import { Component, OnInit, ViewChild, Directive } from '#angular/core';
import { NgbModalConfig, NgbModal } from '#ng-bootstrap/ng-bootstrap';
import {SignaturePad} from 'angular2-signaturepad/signature-pad';
import { ClickOutsideModule } from 'ng-click-outside';
#Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent {
#ViewChild('SignaturePad1', { static: true })signaturepad: SignaturePad;
public signaturepadoption = {
minWidth: 2,
penColor: 'rgb(255,0,0)',
backgroundColor: 'rgb(0,0,0)',
canvasWidth: 250,
canvasHeight: 300,
};
closeResult: string;
constructor(private modalService: NgbModal) {}
openSm(content) {
this.modalService.open(content, { centered: true });
}
SignaturepadPopUp(longContent) {
this.modalService.open(longContent, { scrollable: true, centered: true });
}
onClear() {
this.signaturepad.clear();
}
saveSignature() {
const base64 = this.signaturepad.toDataURL('image\png', 0.1);
console.log(base64);
const blob = this.base64toblob(base64);
console.log(blob);
}
base64toblob(base64) {
const bytestring = atob(base64.split(',')[1]);
const stringtype = base64.split(',')[0].split(':')[1].split(':')[0];
const size = bytestring.length;
const saveString: any[] = new Array(size);
for (let i = 0; i < bytestring.length; i++) {
saveString[i] = bytestring.charAt(i);
}
const ia = new Uint8Array(saveString);
return new Blob([ia], {type: stringtype});
}
}
<ng-template #content let-modal>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure You want to complete Activity?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="modal.close('Close click')">No</button>
<button type="button" class="btn btn-primary" (click)="SignaturepadPopUp(longContent)">Yes</button>
</div>
</ng-template>
<ng-template #longContent let-modal>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="m-signature-pad">
<div class="m-signature-pad-body">
<signature-pad #SignaturePad1 [options]="signaturepadoption"></signature-pad>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" (click)="onClear()">clear</button>
</ng-template>
<button class="btn btn-secondary" (click)="openSm(content)">Complete Activity</button>

Answer 1

The reason this happens is because ng-template is not rendered yet and thus the signature pad will be undefined. A way I found to work around this is to create my signature pad in a separate component and then add that component to the ngbModal.
So in your example:
<ng-template #longContent let-modal>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="m-signature-pad">
<div class="m-signature-pad-body">
<!-- <signature-pad #SignaturePad1 [options]="signaturepadoption"></signature-pad> -->
<app-my-signature-pad-component></app-my-signature-pad-component> <!-- In this component you add the above commented out line and then do your functionality for the signature pad there. -->
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" (click)="onClear()">clear</button>
</ng-template>
I found that with this approach, you are able to use the ViewChild and don't get the undefined issue.
Hope this makes sense!