Signature Pad disables checkbox

I am using angular2-signaturepad library for my Ionic 3 application and signature pad is working fine inside the application. Now, i have added dynamic html to a div and inside the the dynamic html currently a single checkbox but there will be more in it.

In .html file:

  <ion-row>
    <ion-col>
        <div class="letter-body white-space-pre-line"
                 [innerHTML]="testData | safeHtml:'html'"></div>
    </ion-col>
  </ion-row>
  <ion-row class="patient-signature-pad-input">
    <ion-col class="singnature-pad-col">
      <signature-pad [options]="signaturePadOptions"
                     (onEndEvent)="drawCompletePat()"></signature-pad>
    </ion-col>
  </ion-row>

In .ts file:

this.testData = "<input type='checkbox' />"

Now, the checkbox is rendered in the html properly but when i am trying to check the the checkbox, it's not working.

But, the fun part is that, when i am removing the signature pad from the html, then i can check the checkbox easily.

Can anyone point me out what signature pad is doing with the checkbox added using innerHTML?