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:

Answer 1

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('this works');
    }
}

and in foo.component.html template