0

This is my first question here and I'm only asking because I really couldn't find an answer anywhere - or couldn't figure out how to make it work for me at least (I'm a huge noob when it comes to HTML and Ionic).

Here's the thing: I'm using Ionic and I want to make a text variable work as an HTML object. Instead, it ends up being merely displayed as text (with tags and everything) on the page.

TypeScript (dice.ts)

export class Dice {

...

dice = 4;
result = 0;
teste = "<h2>Teste</h2>";

...

HTML (dice.html)

<ion-content padding>

<h1> TITULO </h1>
{{teste}}

...

</ion-content>

Outcome

TITULO
<h2>Teste</h2>

In other words, it did not create a "header2", but just showed the original string.

Ogari Pacheco
  • 3
  • 1

2 Answers2

1

You can try something like this:

<ion-content padding>
  <h1> TITULO </h1>
  <div ng-bind-html-unsafe="teste"></div>
</ion-content>

also, some more reference: AngularJS : Insert HTML into view

Community
  • 1
  • 1
Nick
  • 13,493
  • 8
  • 51
  • 98
  • I did try this before and now, once again, tried it with your code (copy-pasted it) and the text simply disappeared. Instead of displaying the header correctly, it showed absolutely nothing. It simply printed "TITULO" (as a "header1") and nothing else. Thank you very much, anyway! – Ogari Pacheco Apr 19 '17 at 16:41
  • You are using angular2, check this one instead http://stackoverflow.com/a/32341540/3760661 – Nick Apr 19 '17 at 16:47
0

Ogari, Please try

<div [innerHTML]={{teste}}></div>

You will find more about this at this link

Community
  • 1
  • 1
Chocksmith
  • 1,188
  • 2
  • 12
  • 40
  • Thanks, it worked perfectly! And sorry it took me so long for the feedback. I had already solved my issue with a workaround using ngContainer and ngFor, but now it's much simpler. – Ogari Pacheco May 02 '17 at 23:51