In our main application, we utilize an RTF control that is standalone and generates CSS classes along with HTML using these classes. This content is loaded through an API.
The generated output looks like this:
.cs95E872D0{} .csCF6BBF71{font-weight:normal;font-style:normal;}
and the HTML is structured as follows:
<p class="cs95E872D0"><span class="csCF6BBF71">this is a test</span></p>
The formatting may not be ideal, but since we cannot modify how the CSS/HTML is generated, we have to work with it as is.
My goal is to display this HTML on a page (easily achievable using the [innerHTML] attribute), however, incorporating the CSS has proven to be challenging.
I attempted 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;
}
Nevertheless, it is rendered in this manner:
<htmlrender _ngcontent-c9="" _nghost-c11="" ng-reflect-styles=".cs95E872D0{} .csCF6BBF71{font">
<span _ngcontent-c11=""></span>
</htmlrender>
This approach does not produce the desired outcome. I also experimented with placing the CSS within <style> tags, but unfortunately, that did not resolve the issue.