# How to render ion-checkbox dynamically in Ionic 3

**URL:** <https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015>\
**Category:** ionic-v3\
**Created:** [June 3, 2018, 11:21am UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015 "2018-06-03T11:21:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![setu1421](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/setu1421/32/117123_2.png) [@setu1421](https://forum.ionicframework.com/u/setu1421)\
**Post date:** [June 3, 2018, 11:21am UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/1 "2018-06-03T11:21:16Z")

</div>

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](https://i.stack.imgur.com/8rL0a.png)](https://i.stack.imgur.com/8rL0a.png)

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](https://i.stack.imgur.com/xWGBV.png)](https://i.stack.imgur.com/xWGBV.png)

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

---

<div class="post-metadata">

**Author:** ![sreejith13](https://avatars.discourse-cdn.com/v4/letter/s/d2c977/32.png) [@sreejith13](https://forum.ionicframework.com/u/sreejith13)\
**Post date:** [June 3, 2018, 5:27pm UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/2 "2018-06-03T17:27:01Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![setu1421](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/setu1421/32/117123_2.png) [@setu1421](https://forum.ionicframework.com/u/setu1421)\
**Post date:** [June 4, 2018, 2:51am UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/3 "2018-06-04T02:51:55Z")

</div>

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

Why is that?

---

<div class="post-metadata">

**Author:** ![sreejith13](https://avatars.discourse-cdn.com/v4/letter/s/d2c977/32.png) [@sreejith13](https://forum.ionicframework.com/u/sreejith13)\
**Post date:** [June 4, 2018, 6:08am UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/4 "2018-06-04T06:08:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![setu1421](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/setu1421/32/117123_2.png) [@setu1421](https://forum.ionicframework.com/u/setu1421)\
**Post date:** [June 4, 2018, 6:15am UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/5 "2018-06-04T06:15:01Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:33pm UTC](https://forum.ionicframework.com/t/how-to-render-ion-checkbox-dynamically-in-ionic-3/132015/6 "2021-07-19T21:33:36Z")

</div>

Closed on July 19, 2021, 9:33pm UTC