CODEWITHSUNDEEP
javascripthtmltypescripttextionic-framework
Ogari Pacheco
Ogari Pacheco

Reputation: 3

How to turn text into html object in Ionic

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.

Upvotes: 0

Views: 541

Answers (2)

Chocksmith
Chocksmith

Reputation: 1208

Ogari, Please try

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

You will find more about this at this link

Upvotes: 0

Nick
Nick

Reputation: 14283

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

Upvotes: 1

Related Questions