Render CSS for innerHtml using angular2

Question

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?

Frederik Struck-Schøning · Accepted Answer · 2017-08-22 10:32:48Z

6

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>`;
  }

}

edited Aug 22, 2017 at 10:32

Frederik Struck-Schøning

13.3k9 gold badges63 silver badges70 bronze badges

answered Oct 10, 2016 at 13:26

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

1 Comment

micronyks Over a year ago

Welcome @ShaunGroenewald

Community · Accepted Answer · 2017-05-23 11:54:13Z

3

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.

See also In RC.1 some styles can't be added using binding syntax

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Oct 10, 2016 at 13:22

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

taylor michels · Accepted Answer · 2018-02-14 21:47:59Z

3

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>

edited Feb 14, 2018 at 21:47

answered Feb 6, 2018 at 19:21

taylor michels

5386 silver badges14 bronze badges

3 Comments

Derek Brown Over a year ago

This post was flagged as low quality as it was missing an explanation. Try expanding upon your answer.

taylor michels Over a year ago

@DerekBrown explanation added

Sakkeer A Over a year ago

@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>

Collectives™ on Stack Overflow

Render CSS for innerHtml using angular2

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related