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-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>

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?


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

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


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

Why is that?


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


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?