Displaying pre-formatted HTML content in Ionic

Question

I have pre-formatted HTML content (from third Party) that I need to display in Ionic. For example, I have list of questions (pre-formatted html) that I get from DB which I need to display as a list of Ion-Items or Ion-Card in Ionic.

Sample HTML Content from DB:

First Record:

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 1</strong></span><br />
  TEXT_DESCRIPTION 1<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

Second Record

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 2</strong></span><br />
  TEXT_DESCRIPTION 2<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

Third Record:

<p>
<span style="color: #eb4924;"><strong>SOME_TEXT_HEADER 3</strong></span><br />
  TEXT_DESCRIPTION 3<br />
  <span style="color: #339966;"><strong>SOME_COMMENTS_HEADER:</strong></span><br />
  SOME_COMMENT_TEXT_1<br />
  SOME_COMMENT_TEXT_2<br />
  <img src="https://xyx.com/SOME_IMAGE.jpg" alt="ALT_TEXT" width="320" height="116"/>
  SOME_COMMENT_TEXT_3<br />
</p>

...and so on

I want to get suggestions regarding best practices to handle this scenario. Any help would be highly appreciated. Thanks!

Sam · Accepted Answer · 2019-07-04 09:06:36Z

3

You can DomSanitizer from Angular, to display your html.

Html :

  <div class="details" [innerHtml]="details">
  </div>

</ion-content>

And in your ts :

 displayHTML(data){
        this.details = this.sanitizer.bypassSecurityTrustHtml(data);
 });

Don't forget to declare in the constructor :

public sanitizer: DomSanitizer

answered Jul 4, 2019 at 9:06

Sam

1,1692 gold badges11 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Displaying pre-formatted HTML content in Ionic

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related