I'm trying to convert Vanilla JavaScript code to Angular 2+.
In Javascript, I have a statement like this:
document.documentElement.style.setProperty(`--${cssVariableName}`, value);
In Angular, the only way I've found to replicate the above statement is like this:
renderer.setProperty(document.documentElement, 'style', `--${cssVariableName}: ${value}`);
The issue: If I have multiple custom properties being dynamically set at different times (--cssVariable1, --cssVariable2...). The Angular Renderer will overwrite the style property instead of appending to the style property.
Can the renderer be used to achieve this functionality? If not, is there a preferred way of using CSS custom properties in Angular? Thanks!
What you could use is [ngStyle]. You don't need to use the renderer.
In your controller you can have an object with the css properties you want to apply.
Like this.
props = {'color': 'red', 'font-size': '18px'};
And then in your html you can use that inside ngStyle to apply those properties to an element.
<div [ngStyle]="props">Great example</div>
Hope it helps.