Html encoding in angular 4

Question

I need your help with html encoding in angular 4. I have some product records in database, with fullDescription field in this format:

&lt;div align="justify"&gt;&lt;span&gt;

Using <div *ngIf="product" [innerHTML]="product.fullDescription"></div> I'm getting the following output:

<div align="justify"><span>

as text. Is this possible to render this as the innerHtml and not as text?

Thanks in advance.

Amr Al-Amir · Accepted Answer · 2017-09-23 20:00:50Z

19

In your component's class, you can use HTML entity decoder function like this:

toHTML(input) : any {
    return new DOMParser().parseFromString(input, "text/html").documentElement.textContent;
}

and in the template use:

<div *ngIf="product" [innerHTML]="toHTML(product.fullDescription)"></div>

answered Sep 23, 2017 at 20:00

Amr Al-Amir

1,9811 gold badge16 silver badges20 bronze badges

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

2 Comments

Nadim Hossain Sonet Over a year ago

I am also stuck with this issue. I have applied this process but so far no luck.

Rajeev Kumar Over a year ago

Inline styles present in string html content is not loading in Inner HTML content.

Nadim Hossain Sonet · Accepted Answer · 2020-05-24 01:44:04Z

9

I have done it by implementing pipe.

Create a component.ts file and in that file:

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'sanitizeHtml', pure: false })
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(data): SafeHtml {
    return this.sanitizer.sanitize(SecurityContext.HTML, data);
  }
}

Then in app.module.ts:

import { SanitizeHtmlPipe } from './pagecontent/pagecontent.component';
add SanitizeHtmlPipe inside declarations[]

Finally in component.html:

<span [innerHTML]="data | sanitizeHtml"></span>

Thats it. :) :) :)

edited May 24, 2020 at 1:44

answered Apr 11, 2018 at 11:33

Nadim Hossain Sonet

1,7091 gold badge16 silver badges24 bronze badges

Comments

Rajeev Kumar · Accepted Answer · 2020-11-27 20:16:22Z

1

Above solution partially solved my issue. Along with above changes, below code changes helped me to load encoded string html with inline styles to div correctly.

Html code changes:

<div *ngIf="product" id="divFullDescription" #divFullDescription></div>

Angular component.ts side code changes:

@ViewChild('divFullDescription', { static: true }) divFullDescription: ElementRef;

loadHtml() {
    this.divFullDescription.nativeElement.innerHTML = 
        this.toHTML('&lt;div align="justify" style="color:red;"&gt;&lt;span&gt;');
}

toHTML(input) : any {
    return new DOMParser().parseFromString(input, "text/html").documentElement.textContent;
}

I hope, this may help someone. Thanks!

edited Nov 27, 2020 at 20:16

answered Nov 27, 2020 at 20:10

Rajeev Kumar

3712 silver badges10 bronze badges

Collectives™ on Stack Overflow

Html encoding in angular 4

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related