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 }};
    }
`]

This is not supported. Use [class.some-class]="..." or [ngClass]="..." on the element or @HostBinding('class.some-class') someClass= true;' — Günter Zöchbauer
– Günter Zöchbauer, Commented Nov 20, 2017 at 16:38
@GünterZöchbauer that is only useful when setting a specific class based on a boolean, I need a color set from configuration — user3531149
– user3531149, Commented Nov 20, 2017 at 16:40

br.julien · Accepted Answer · 2017-11-21 16:16:06Z

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

answered Nov 21, 2017 at 16:16

br.julien

3,4602 gold badges28 silver badges44 bronze badges

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

Comments

Adam Pery · Accepted Answer · 2017-11-20 16:38:22Z

0

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>

answered Nov 20, 2017 at 16:38

Adam Pery

2,10223 silver badges21 bronze badges

3 Comments

user3531149 Over a year ago

ngStyle would be need to be set to every single a and button element ....

Adam Pery Over a year ago

Maybe [ngClass] can help you

user3531149 Over a year ago

I think ngclass only accepts true or false, but I'll check out the documentation

Collectives™ on Stack Overflow

How to set a css class value from variable

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related