I have a unique challenge at hand. I am currently utilizing AngularTS with C# on the server-side and TypeScript on the client-side.
I am looking to enhance our application by allowing customers to input CSS styles in a text box or specify file locations (external).
In a custom component, I aim to include HTML code from the official customer site. The customer should be able to add CSS files or text to display content on our page similar to their official site.
Unfortunately, I have been unable to find a way to incorporate the CSS files.
@Component({
selector: 'customer-footer',
templateUrl: './customer-footer.component.html'
styleUrls: getCSS()})
export function getCSS(): string [] {
var styles: string[] = [];
styles.push("https://");
return styles;}
This approach is ineffective as AOT is not compatible with static references.
I attempted to insert the CSS content within the styles tag:
<style type="text/css>
{{footerCSS}}</style>The best outcome I achieved was adding an object (CSS) in ngStyle for display purposes.
<div *ngIf="!fixedBottom"
[innerHtml]="footerHtml"
[ngStyle]="footerCSS"></div>However, I'm struggling to convert CSS code like the one below into a functional object. Does anyone have any ideas or helpful insights?
.flatWeatherPlugin {
font-size: inherit;
width: 100%;
}
.flatWeatherPlugin p, .flatWeatherPlugin h2, .flatWeatherPlugin h3, .flatWeatherPlugin ul, .flatWeatherPlugin li {
padding: 0;
margin: 0;
color: inherit;
}If you have any suggestions or tips, please share them!