How to inject a CSS StyleSheet at runtime in an Angular Component

Question

I need to inject a stylesheet into a component at runtime. Basically depending on user configuration settings a theme is picked and dependending on the active theme the CSS url changes.

Static injection via styelUrls doesn't work for this since that's static at compile time.

Nor does it seem to work when I directly inject the style link into the component:

<link [href]="themeLink" rel="stylesheet"  *ngIf="themeLink" />

I've tried a few variations here - interpolation, using an @import() style - none of it seems to work with a dynamically assigned value.

The resources have been added to the included resources and it works if I hardcode the above link to a specific style. But setting the value at runtime gives me an error:

core.js:6228 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

which is fair.

But I can't seem to find a way to dynamically set a style sheet at runtime.

What's the correct way to do this?

Did you try binding the result of DomSanitizer.bypassSecurityTrustResourceUrl(themeLink)? — Martin Parenteau
– Martin Parenteau, Commented Jul 20, 2020 at 21:48
No - didn't know that was a thing. Checking now. Thanks! Yes that works. Want to post that as the answer? this.themeLink = this.sanitizer.bypassSecurityTrustResourceUrl("themes/" + appModel.configuration.theme + "/theme.css"); — Rick Strahl
– Rick Strahl, Commented Jul 20, 2020 at 21:50

Martin Parenteau · Accepted Answer · 2020-07-20 22:03:06Z

3

You can prevent the error by disabling the Angular sanitization with the help of the bypassSecurityTrustResourceUrl method of the DomSanitizer:

constructor(private sanitizer: DomSanitizer) {
  let themeUrl = "themes/" + appModel.configuration.theme + "/theme.css";
  this.themeLink = this.domSanitizer.bypassSecurityTrustResourceUrl(themeUrl);
}

answered Jul 20, 2020 at 22:03

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to inject a CSS StyleSheet at runtime in an Angular Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related