5

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?

Samir Guiderk
  • 187
  • 2
  • 4
  • 17

2 Answers2

10

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>";
ElasticCode
  • 7,311
  • 2
  • 34
  • 45
2

You can write your code in

[innerHTML]='post.body'

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

Pradip Rupareliya
  • 545
  • 1
  • 6
  • 18