decode html entities in angular 6

Question

I'm looking for a library which I can decode my HTML entities in angular 6

I've tried to find something and I found a function called trustashtml in angular 2, but I don't think so is available for 6 version.

Below you sould find my code in html template :

 <div [innerHTML]="post.body | markdown"></div>

My field post api return a native html is something like that :

<p style="margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;">Hey Android users! Since launching the Grammarly Keyboard for iOS, we&rsquo;ve heard from </p>

Any idea?

ElasticCode · Accepted Answer · 2018-07-08 14:29:48Z

11

You will need to use DomSanitizer bypassSecurityTrustHtml() to Bypass security and trust the given value to be safe HTML, Otherwise style ateribute will not be rendered.

Create custom Pipe.

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

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) { }
  transform(value) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

Component HTML.

<div [innerHtml]="html | safeHtml"></div>

In your component define a variable that will hold the HTML value.

html: string = "<p style='margin: 1em 0px; font-size: 18px; line-height: 1.5; font-family: Lato, sans-serif;'>Hey Android users! Since launching the Grammarly Keyboard for iOS, we&rsquo;ve heard from </p>";

answered Jul 8, 2018 at 14:29

ElasticCode

7,9252 gold badges38 silver badges49 bronze badges

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

2 Comments

Sam from mars Over a year ago

Thanks it's worked for me but i use the pipe inside the ngOnInit function in component html didn't worked ==> his.post.body =this.safehtmlforpost.transform(data.post.body);

ElasticCode Over a year ago

Type of post.body should be SafeHtml

Pradip Rupareliya · Accepted Answer · 2019-09-27 13:55:54Z

2

You can write your code in

[innerHTML]='post.body'

Angular it considers as an attribute and it converts automatically in HTML.

answered Sep 27, 2019 at 13:55

Pradip Rupareliya

5741 gold badge6 silver badges19 bronze badges

1 Comment

Sam from mars Over a year ago

Yes, I've solved this issue and guys bellow suggested the same as you mentioned.

Collectives™ on Stack Overflow

decode html entities in angular 6

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related