"IONIC 3" page adding html content variable

Question

I am trying to add a variable containing html to my ionic 3 page

Ionic Page:

<ion-header>

  <ion-navbar>
    <ion-title>{{offeritem.data.nameprovider}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <div>
    {{offeritem.data.detailsoffer}}
  </div>
</ion-content>

However I am getting the following

Result:

<p>The table contains 30 pieces:</p><ul><li>5 Philadelphia Roll</li>
<li>5 Fantasia Roll</li>

Please let me know what I am doing wrong in this case.

Thanks in advance

If I use the variable without {{}} I just get the offeritem.data.detailsoffer as a string. The expected result is a formatted html content based on the variable value. Currently I only get the html string value. — JADSAM
– JADSAM, Commented May 22, 2017 at 11:11
ng-bind-html use this attribute...w3schools.com/angular/ng_ng-bind-html.asp..if incase of ionic2+ use [innerhtml] or other alternative — varun aaruru
– varun aaruru, Commented May 22, 2017 at 11:21
Thanks for your comments however after trying both options none of them worked. Maybe I am doing something wrong. Do you believe there is any Ionic framework or Ionic way dependency on this? — JADSAM
– JADSAM, Commented May 22, 2017 at 12:42

Jose Villalobos · Accepted Answer · 2018-01-30 21:05:54Z

14

You should use [innerHTML] for ionic 3 like this:

<p [innerHTML]="yourVarHere"></p>

answered Jan 30, 2018 at 21:05

Jose Villalobos

5595 silver badges9 bronze badges

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

Comments

Khurshid Ansari · Accepted Answer · 2019-04-15 10:19:15Z

5

<span [innerHTML]="offeritem.data.detailsoffer"></span>

REF

Note the section on "Property binding or interpolation?"

edited Apr 15, 2019 at 10:19

Khurshid Ansari

5,1142 gold badges39 silver badges63 bronze badges

answered May 22, 2017 at 17:36

user1752532

2 Comments

JADSAM Over a year ago

Thanks for your last answer, this allowed to me to address my search and found this <p [innerHTML]="offeritem.data.detailsoffer"></p> it works perfect now

Rodrigo Graça Over a year ago

@JADSAM can you change the correct answer then? This one is not correct.

Khurshid Ansari · Accepted Answer · 2019-04-15 10:32:56Z

3

import {DomSanitizationService} from '@angular/platform-browser';

class....{
  public getSafehtml(html:string){
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

<ion-content padding>
  <div [innerHTML]="getSafehtml(offeritem.data.detailsoffer)"></div>
</ion-content>

If you not bypassSecurityTrustHtml then your style will not work.

answered Apr 15, 2019 at 10:32

Khurshid Ansari

5,1142 gold badges39 silver badges63 bronze badges

1 Comment

Ronald Araújo Over a year ago

I'm used DomSanitizer.

Collectives™ on Stack Overflow

"IONIC 3" page adding html content variable

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related