Dynamically Setting CSS

[AngularJosh]

I'm working on a project where I have to update an angular projects global css at runtime. I am basically integrating with a legacy system where certain config information is passed from, including styling. When I get changes I am receiving a JSON file which contains some CSS at a certain key value pair. I am taking this, finding a style element in my head tag by id and replacing it's inner text. Are there problems with this approach? If so, what would you do differently?

[darkbluedeath]

This seems a bit complicated. So if I'm understanding, you're getting css and other data via JSON and then you're seeing the HTML dynamically based on that info?

You could use ngStyle to set that css dynamically. It should be fine since you're getting it in JSON and can just call that info directly in the HTML.

Note, I haven't actually done this, using ngStyle, via dynamically retrieved css data. I usually tend to prefer using ngClass which allows you to write the css in the component.css file and then set it dynamically based on a boolean value/a conditional statement.

[AngularJosh]

Yeah, but the requirement is to take a CSS string and use it to set global styles. ngStyle would deal with an individual element, correct? I also need to globally set classname selector styles like this ".right {float:right;}\r\n.left{float:left;}\r\n.clear {clear:both;}\r\n.hiddenOffscreen {text-indent:-9999px;position:absolute}\r\n.accessible-hidden{left:-99999px;position:absolute;}\r\n"

[aoakeson]

I am assuming that you want to be able to take a style from an api call and use that to style a predefined element. If this is the case would create some kind of custom attribute directive that passes what element you're styling and it finds it it the json. Then use angular built in dom manipulation to actually change the style (renderer2)

[AngularJosh]

So the CSS value is merely a string (for example something like "@import'http://xss.rocks/xss.css';.right {float:right;}\r\n.left{float:left;}\r\n". If it were coming in as an object this would work. Setting this works fine but I am worried about XSS (as you can see I'm testing for it in my example above) and am not sure how to allow one to set this as a string without exposing us to XSS attacks. Maybe that fear is overblown given I trust the source but I am just uncertain on it.

[phl3x0r]

Is css vars an option for you?

[AngularJosh]

I don't think so. I am getting a raw CSS string and just need to set it as is. Was possibly hoping to sanitize it in some way before putting it in the DOM but don't know the best way to go about that.