Trying to render html in ionic

Question

I'm trying to render an html string so that it displays links, etc using Ionic. This is my very first Ionic app.

<ion-content class="home">
<ion-list>
  <ion-item *ngFor="let f of item">
    <h2 class="question" style="white-space:initial;" ng-bind-html="{{f.question}}">{{f.question}}</h2>
    <p class="answer" style="white-space:initial;" ng-bind-html="{{f.answer}}">{{f.answer}}</p>
  </ion-item>
</ion-list>
</ion-content>

I've tried ng-bind-html as above and it's saying...

Unhandled Promise rejection: Template parse errors: Can't bind to 'ng-bind-html' since it isn't a known property of 'h2'. ("

I've also tried ng-bind-html-safe but that produces the same error. Without the ng-bind-html code, the string is displayed but with the html characters not being interpreted.

Also, here is the code coming from the .ts file

  this.faqService.load()
  .then(data1 => { 
    this.item = data1;
  });

http://stackoverflow.com/questions/31548311/angular-2-html-binding — Suraj Rao, Mar 07 '17 at 05:40
ng-bind-html is in angular 1. not sure why you need to bind in your example though. — Suraj Rao, Mar 07 '17 at 05:41
using [innerHTML]="{{f.answer}}"> throws the following error: Unhandled Promise rejection: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{f.answer}}] in Faq@26:25 ("
{{f.question}}

][innerHTML]="{{f.answer}}">{{f.answer}} — Cary, Mar 07 '17 at 05:47

Answer 1

][innerHTML]="{{f.answer}}">{{f.answer}}

score 4 · Answer 2 · answered Mar 07 '17 at 05:52

4

The answer to my question is

<p [innerHTML]="f.answer"></p>

Hope this helps other newbies to Angular 2 / Ionic.

answered Mar 07 '17 at 05:52

Cary

278
1
3
17

This allows for cross site scripting You should use it very sparingly. – Mar 07 '17 at 12:49

Trying to render html in ionic

{{f.question}}

1 Answers1