How to turn text into html object in Ionic

Question

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.

Community · Accepted Answer · 2017-05-23 11:33:17Z

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

edited May 23, 2017 at 11:33

CommunityBot

11 silver badge

answered Apr 19, 2017 at 15:42

Nick

14.4k10 gold badges55 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ogari Pacheco Over a year ago

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!

Nick Over a year ago

You are using angular2, check this one instead stackoverflow.com/a/32341540/3760661

Community · Accepted Answer · 2017-05-23 12:34:59Z

0

Ogari, Please try

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

You will find more about this at this link

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 24, 2017 at 10:16

Chocksmith

1,2082 gold badges13 silver badges42 bronze badges

1 Comment

Ogari Pacheco Over a year ago

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.

Collectives™ on Stack Overflow

How to turn text into html object in Ionic

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related