# Interpolate string that contains html

**URL:** <https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376>\
**Category:** Ionic Angular\
**Created:** [September 16, 2020, 3:50pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376 "2020-09-16T15:50:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![UnknownInnocent](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/unknowninnocent/32/133712_2.png) [@UnknownInnocent](https://forum.ionicframework.com/u/UnknownInnocent)\
**Post date:** [September 16, 2020, 3:50pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376/1 "2020-09-16T15:50:52Z")

</div>

Hello, I have a string that contains some html code, for example:

```auto
text = "<ion-text color='danger'>test</ion-text>";

```

How can I interpolate it that I don’t get the code as an output but a res “test”?

```auto
{{test}}

```

does not work

---

<div class="post-metadata">

**Author:** ![EinfachHans](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/einfachhans/32/130917_2.png) [@EinfachHans](https://forum.ionicframework.com/u/EinfachHans)\
**Post date:** [September 16, 2020, 5:40pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376/2 "2020-09-16T17:40:44Z")

</div>

You should read about [innerHTML](https://developer.mozilla.org/de/docs/Web/API/Element/innerHTML)

Some more: [https://stackoverflow.com/questions/31548311/angular-html-binding](https://stackoverflow.com/questions/31548311/angular-html-binding)

---

<div class="post-metadata">

**Author:** ![UnknownInnocent](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/unknowninnocent/32/133712_2.png) [@UnknownInnocent](https://forum.ionicframework.com/u/UnknownInnocent)\
**Post date:** [September 16, 2020, 6:17pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376/3 "2020-09-16T18:17:50Z")

</div>

Okay thank you, but there still is a problem:  
if I use `<div [innerHTML]="text"></div>` I get the text from the string but not the styling.  
If I use

```auto
let div = document.getElementById('text');
div.innerHTML = this.text;

```

it works, why does the other way not work?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [September 16, 2020, 6:42pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376/4 "2020-09-16T18:42:08Z")

</div>

Not that you need to care about my opinion, but I hate `innerHTML` with a passion, and would like to try to convince you to forget it exists.

One of the great things IMHO about Angular is the way that it cleanly separates parts of an app that are generally developed by different teams, or at the least somebody wearing different “brain-hats” in terms of how they think. Having to wade through TypeScript code in order to change UI layout is frustrating, and similarly so for HTML that is mashed into controller code.

There are also concerns about security, especially when externally-sourced data gets involved. Once you lock those down (many of which Angular’s sanitation does for you, causing further problems once you try to push the envelope of what you can do with `innerHTML`), you end up with HTML as a nerfed DSL, and it’s terribly suited for that. It’s tremendously difficult to parse correctly, yet very easy to process unreliably, encouraging all sorts of needless time bombs in your code that won’t bite anybody until somebody, either accidentally or maliciously, drops Little Bobby Tables in there.

So I would urge you not to use HTML outside of templates, where it is written (and can be analyzed) statically. Don’t use it as an intermediate transfer language, don’t process it in your controller code, and don’t inject it with `innerHTML`.

---

<div class="post-metadata">

**Author:** ![UnknownInnocent](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/unknowninnocent/32/133712_2.png) [@UnknownInnocent](https://forum.ionicframework.com/u/UnknownInnocent)\
**Post date:** [September 16, 2020, 7:34pm UTC](https://forum.ionicframework.com/t/interpolate-string-that-contains-html/196376/5 "2020-09-16T19:34:08Z")

</div>

Okay I understand your point. I will look for a solution without innterhtml
