How to render ion-checkbox dynamically in Ionic 3

I want to render ion-checkbox dynamically in my html page. I tried using below:

In .ts file:

sanitizeLetterBody = (letterBody): string => {
  let replaceText = "<ion-item><ion-label><b>Read and approved with initials below. </b></ion-label><ion-checkbox class='letter-initials'></ion-checkbox></ion-item>";
  return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
}

In .html file:

<ion-row>
    <ion-col class="padding-top-10 padding-left-0 padding-right-0 padding-bottom-0">
        <div class="letter-body white-space-pre-line" [innerHTML]="customLetterData.LetterBody | safeHtml:'html'"></div>
    </ion-col> 
</ion-row>

But, the checkbox did not render in the html page like below:

Then i tried using <input type='checkbox'> like below:

sanitizeLetterBody = (letterBody): string => {
  let replaceText = "&nbsp;<input type='checkbox' class='check-pat-initials' name='test'><b>Read and approved with initials below.</b>&nbsp;";
  return letterBody.split("#PAT_SIGN_INITIAL#").join(replaceText);
} 

The checkbox is rendered nicely but i can't check or un-check the checkbox.

1. Why can't i check or un-check the checkbox which are rendered dynamically?
2. Is there any different approach to achieve this?