Angular (2/5) rendering issue on html text with inline styles

Question

I am having issue on displaying HTML data including inline style which get generated dynamically via Editor (eg. TinyMCE). In fact, I have use the innerHTML binding to display the html data. However, it ignore any inline style.

For example:

I have the following sample data on component.ts:

 let sampleData = '<h1><span style="background-color: #ffff99;">Welcome to the sample demo!</span></h1> <p><span style="color: #ff0000;">Please try out the features provided in this basic example.</span>'

I am trying to display on component.html:

<div innerHTML="{{ sampleData }}"></div>

Actual output is:

Welcome to the sample demo!

Please try out the features provided in this basic example.

Expected output:

Answer 1

Sorry for creating duplicated question.

However, I resolved the issue after creating custom pipe

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

/*
 * Pipe to avoid stripping the inline style on html text.
 *
 * Usage:
 *   safeHtml
 * Example:
 *  1. In Javascript:
 *      let input = new SafeHtml().transform(input);
 *
 *  2. In HTML:
 *      {{ safeHtml }}
*/

@Pipe({ name: 'safeHtml'})

export class SafeHtmlPipe implements PipeTransform  {
    constructor(private sanitized: DomSanitizer) {}
    transform(input) {
        return this.sanitized.bypassSecurityTrustHtml(input);
    }
}

Apply pipe:

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

Reference source: Angular2 innerHtml binding remove style attribute