0

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: enter image description here

Improve this question
0

1 Answer 1

Reset to default
0

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

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.