How to set a css class value from variable

Question

I'm trying to set the color of all 'button' and 'a' tags to a color coming from a variable. Like this, which obviously doesn't work.

@Component({
styles: [`    
    a, button {
        color: {{ color_from_variable }};
    }
`]

Answer 1

This worked for me :

export const mainColor = 'blue';

@Component({
  ...
  styles: [`    
    p {
      color: `+mainColor+`;
    }
 `]
})

Here is a StackBlitz example I made for this : https://stackblitz.com/edit/angular-vpaarz

Answer 2

You can use ngStyle:

<some-element [ngStyle]="{'font-style': styleExp}">...</some-element>

<some-element [ngStyle]="{'max-width.px': widthExp}">...</some-element>

<some-element [ngStyle]="objExp">...</some-element>