Render CSS, either from @Input or object property

We have an RTF control in our main application (standalone) which also generates CSS classes, and HTML that uses these classes. This is being loaded via an API.

It’s outputted like this:

.cs95E872D0{} .csCF6BBF71{font-weight:normal;font-style:normal;}

and the HTML is outputted like so:

<p class="cs95E872D0"><span class="csCF6BBF71">this is a test</span></p>

It’s terribly formatted but I guess that’s what you get with auto-generated stuff! We are unable to change the generation of this CSS/HTML so unfortunately this is what I have to work with.

I need to display this HTML on a page (easy enough with the [innerHTML] attribute) however when it comes to doing it with the CSS I can’t seem to figure it out.

I’ve tried creating a new component:

import { Component, Input } from "@angular/core";

@Component({
    selector: 'htmlrender',
    template: `<span [innerHtml]="html"></span>`,
    styles: ['{{styles}}']
})
export class TestComponent {
    @Input() html: string;
    @Input() styles: string;
}

However it gets rendered as this:

<htmlrender _ngcontent-c9="" _nghost-c11="" ng-reflect-styles=".cs95E872D0{} .csCF6BBF71{font">
    <span _ngcontent-c11=""></span>
</htmlrender>

Which doesn’t work. I’ve also just tried to render the CSS inside <style> tags but that doesn’t seem to work.

If the output is always the same you can use a string.slice() and string.replace().

I did it like this:

this.str = '.cs95E872D0{} .csCF6BBF71{font-weight:normal;font-style:normal;}';
let slice = this.str.split(".", 3);
console.log('.' + slice[1]);
console.log('.' + slice[2]);

They output of slice[1] and slice[2] look like:

.cs95E872D0{}

.csCF6BBF71{font-weight:normal;font-style:normal;}