Render HTML tags in template

Ionic Framework ionic-v3
1

Hi,
I need to render HTML-Tags in a template like:

<span class="large" [inner-html]="{{item.TextWithHtmlTags}}"></span>

This does render the text, but does not interpret the html markup (like <br>). Do I need to prepare the Html markup before it renders correctly?

2

Can you just do this?
<span class="large">{{item.TextWithHtmlTags}}</span>

3

That is how I did it in the first place, but it renders the tags like normal text. There is actually no difference to the other method.

4

Hi,

Try this:

<span class="large" ng-bind-html="item.TextWithHtmlTags"></span>

it works for me.

Check here for more info: http://www.w3schools.com/angular/ng_ng-bind-html.asp

Happy hacking…

5

This is ionic 2 which uses angular 2 which does not have the ng-bind anymore…at least as far as I investigated.

1 Like
6

Good point, it escaped my attention…

I personally did not try this with angularjs 2.0 yet.

I looked a bit into this and with a slight change of your code it should work.

Since angular2 is still in beta everything is open to changes and I found different sollutions to different beta versions:

<span class="large" [inner-html]="item.TextWithHtmlTags"></span>
or
<span class="large" inner-html="{{item.TextWithHtmlTags}}"></span>

Let us know how it works for you.

1 Like
7

Yes, I have been searching through the angular 2 docu and tried already all the different versions, but it didn´t work.
Strangely, now I even get an error with the [inner-html] that says:

Can’t bind to ‘inner-html’ since it isn’t a known native property.

This actually didn´t throw an error before. But I have upgraded to alpha48…maybe that broke it…

8

Hi,

That’s the issue of developing with a platform that’s still in beta.

I may have a vague idea to get around some obstacles. I never applied those but it seems interesting.

One would be the DynamicComponentLoader approach


The trick seems to be to dynamicaly change your component template here. I do not know if it will be possible because it raises security issues.

9

Hi,
yes, I have seen that article, too. But as far as I understand it, that is targetting a different use case. I believe he wants to be able to dynamically “execute” html like

<div><my-angualar-component></my-angular-component></div>

So the “my-angular-component” gets expanded to whatever template is defined for it.

My use case is actually very simple: I want to display (read-only) simple text in a <div>{{myText}}</div> that I read from a database. This text has very basic html-tags mainly for line-break:

<div>this is line 1 <br />and here goes line two <br />and here is line 3</div>

That is all I need…it can´t be so difficult, can it?

10

I’ll look into it later in more detail.

meanwhile you can always take the string, split it into an array, compare it’s values and you can reconstruct the string-value html in a dynamic template containing your basic html markup. It is even easier if your html string is consistent in it`s markup.
I’ve done this in angular1, but not yet in angular2.
I had a quick look at the documentation and it seems still possible. When I have a bit of time, I’ll try and generate a codepen.

Hopefully they fix [inner-html] in a coming beta release.

11

Thanks for your answer! I will try your proposal and I appreciate if you further look into this.

13

The correct syntax is now the following:
[innerHTML]=“theHtmlString”

Working in “angular2”: “2.0.0-alpha.52”

11 Likes
14

It works with html default tags, and with Ionic 2 components?
Example:

this.theHtmlString = ''my item";

15

Hi @chrisbenseler,

Did you find the proper answer ?

It doesn’t seem to work with Ionic 2 components…

16

Hi all,

did you find any answer for this issue?

Regards

17

The most solid answer is “figure out another way to achieve your goal”. This is deliberately unsupported in Angular 2+, for IMHO very good reasons. Here is one alternative approach.

18

Sweeet…after trying all the other options this one works.
In my example, binding the inner html to my component variable syntactically worked like this.
<span [innerHTML]=menuOption.title>

Note: No quotes ("") or braces {{}}

3 Likes
19

with quotes it will work as well

20

The correct syntax is now the following:

It will work fine for ionic V1, V2, and V3.