how to use ng-deep with dynamic data

Question

I need to dynamically define font-size sizes for a given class but the values they are taken from the server. statically it looks like this:

::ng-deep .text-huge {
   font-size: 2.8em; 
}

How can I convert this so that the assigned values are dynamic?

::ng-deep .text-huge {
   font-size: data.fontSize; 
}

Thank you for your help

Answer 1

You can add dynamic CSS by injecting it into the <style> element directly.

Example :

data = { fontSize : '13px' };

const textCss = `::ng-deep .text-huge {
   font-size: ${data.fontSize}; 
}`

document.getElementsByTagName('style')[0].append(textCss);

NOTICE : The code above will add your CSS to the first style element in your document

Or you can create a style element and inject it directly to your component with your dynamic CSS .

Answer 2

You can't assign CSS variable's value from the TS.

Set sass variable value in Angular 7

What you can do is use CSS variables in your project that gets modified by some value by the TS file:

css:

::root {
  --some-var: #fff;
}

.your-class {
  color: var(--some-var);
}

in the ts:

// Assuimg that new value is an HEX color without `#`
public changeSomeVar(newValue: string): void {
  document.documentElement.style.setProperty('--some-var', #${newValue});
}