Signature_pad: How to use signature pad with multiple instance of it on same page

Created on 19 Mar 2017 · 2Comments · Source: szimek/signature_pad

I like onBeginEvent and onEndEvemt and do not want to go the general JS way with onClick event that you have in your sample using canvas element.

  <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete('shipperSignature')"></signature-pad>

How do I create multiple instance of signature pad (3 in my case) using ionic 2 and angularJS 2

question

Source

simran66

Most helpful comment

@ViewChild('sigpad1') signaturePad: SignaturePad;
@ViewChild('sigpad2') signaturePad2: SignaturePad;

HTML:
<signature-pad #sigpad1 [options]="signaturePadOptions" (onBeginEvent)="drawStart()" (onEndEvent)="drawComplete()"></signature-pad>

<signature-pad #sigpad2 style="border:1px solid #6995ab" [options]="signaturePadOptions2" (onBeginEvent)="drawStart2()" (onEndEvent)="drawComplete2()"></signature-pad>

In the drawComplete() and drawComplete2() you can get the image from this.signaturePad.toDataURL() and this.signaturePad2.toDataURL()

bplogan on 20 Sep 2017

🎉5 👎1 👍1

All 2 comments

I don't know Ionic but with angular 2, simply use directives

natcohen on 5 Jul 2017