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?

Answer 1

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>";

Answer 2

You can write your code in

[innerHTML]='post.body'

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