How to render ion-checkbox dynamically in Ionic 3

Ionic Framework ionic-v3
1

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:

enter image description here

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.

enter image description here

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

Create a boolean value on .ts gile like status
then inside ion checkbox use [checked] = status

<ion check box [chevked]= “status”>

3

Doing above still does not show the checkbox.!!! When i inspect element, the checkbox is there but it is not showing.

Why is that?

4

what is your requirement?
do you want to create check box dynamic …let me know your requirement

5

I have a string like “#abc# Hello #abc#” . Now, i will replace the #abc# in the string and put checkbox there and those checkboxes can be checked or unchecked. So, to achieve this, i am sanitizing the string and placing it in the innerHTML of a div. The checkboxes are there but they are not clickable.

Have you got it now?