Render CSS for innerHtml using angular2

Asked 10/10, 2016 at 13:19 Answered 6/2, 2018 at 19:21

I am trying to render a HTML template using innerHTML and a html + css string I get from SQL.

Template string example:

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>

Now it renders the HTML fine but it looks like it drops the style tags and just renders the text inside of it.

Example of render:

HTML render part:

<div [innerHtml]="templateBody">
</div>

Home.component.ts parts:

@Component({
    selector: "home",
    templateUrl: `client/modules/home/home.component.html`,
    encapsulation: ViewEncapsulation.Emulated
})
export class HomeComponent implements OnInit{
    templateBody: string;
.....other code
}

I have tried it with encapsulation: ViewEncapsulation.Emulated/None etc, tried inline CSS and I tried appending the :host >>> infront of the p tag. They all render the same.

Any suggestions?

Freeholder answered 10/10, 2016 at 13:19 Comment(0)

Use it with DomSanitizer with bypassSecurityTrustHtml and SafeHtml as shown below,

DEMO : https://plnkr.co/edit/eBlzrIyAl0Il1snu6WJB?p=preview

import { DomSanitizer } from '@angular/platform-browser'

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

@Component({
  selector: 'my-app',
  template: `

      <div  [innerHtml]="html | safeHtml"></div>
  `,
})
export class App {
  name:string;
  html: safeHtml;
  constructor() {
    this.name = 'Angular2'
    this.html = `<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>`;
  }

}

Sandoval answered 10/10, 2016 at 13:26 Comment(1)

Welcome @ShaunGroenewald – Sandoval 10/10, 2016 at 13:54

Inject the Sanitizer and apply bypassSecurityTrustHtml(value: string) : SafeHtml to the HTML content as demonstrated in https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html to make Angular2 aware that you trust the content.

Edouard answered 10/10, 2016 at 13:22 Comment(0)

I did it without any pipes and just by injecting DomSanitizer and SafeHtml into my component and running bypassSecurityTrustHtml on my markup string. This allowed me to keep my inline styles from being parsed out.

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

@Component({
    selector: "foo",
    templateUrl: "./foo.component.html"
})

export class FooComponent { 
    html: SafeHtml;
    constructor(private sanitizer: DomSanitizer) {
        this.html = this.sanitizer.bypassSecurityTrustHtml('<span style="color:##0077dd">this works</span>');
    }
}

and in foo.component.html template

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

Miserable answered 6/2, 2018 at 19:21 Comment(3)

This post was flagged as low quality as it was missing an explanation. Try expanding upon your answer. – Rakia 7/2, 2018 at 0:7

@DerekBrown explanation added – Miserable 14/2, 2018 at 21:49

@taylor michels Hi,I have used your code its working fine.But click function is not working in that tag. Here's my code

<p *ngIf="value.item_df_id == 1" [innerHTML]="this.sanitizer.bypassSecurityTrustHtml(value.data_format_value)" (click)="showQuesBank(seq)">{{value.data_format_value}}</p>

– Butlery 6/8, 2018 at 6:39

Recommended topics

Hot tags