I have a requirement to dynamically inject a stylesheet into a component at runtime. The CSS url needs to change depending on user configuration settings and the selected theme.
Using styelUrls for static injection won't work in this case, as it is set during compile time.
Directly injecting the style link into the component also does not seem to be effective:
<link [href]="themeLink" rel="stylesheet" *ngIf="themeLink" />
I've experimented with various approaches including interpolation and using @import() style, but none of them seem to work with a dynamically assigned value.
The necessary resources are included and everything works if I hardcode a specific style link. However, when attempting to set the value at runtime, an error occurs:
core.js:6228 ERROR Error: unsafe value used in a resource URL context (see )
While this makes sense, I am struggling to find a method to dynamically assign a stylesheet at runtime.
What would be the appropriate approach to achieve this?