"IONIC 3" page adding html content variable

user_7771714 0
Viewed 17316

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

ionic-framework html javascript
3 Answers

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

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

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.

user_66900020
Related