Angular 6, color from css file in ngStyle directive

Question

I would like to use my color which is defined in CSS file for my ngStyle directive (which is in HTML).

This is what i've got in my HTML:

 [ngStyle]="{backgroundColor: isDarkStyle() ? '#29434e' : isNormalStyle() ? '#cfd8dc' : isLightStyle() ? 'white': ''}"

This my CSS file with colors:

//colors for background

$light-background: white;
$normal-background: #cfd8dc;
$dark-background: #29434e;

But i want this:

[ngStyle]="{backgroundColor: isDarkStyle() ? '$dark-background' : isNormalStyle() ? '$normal-background' : isLightStyle() ? '$light-background': ''}"

How can I achieve this result? Thanks for help :)

Because my CSS classes are very big and i want to only change one thing (background-color). If I use ngClass i have to build 3 big CSS classes with only one change (which is background color) — Kacper Kapela, Jul 17 '18 at 08:12
You can still use ngClass with multiple classes. Try to apply your main class and a color class just after. Latter class will have higher priority, therefore will override main class bg color. [ngClass]="{'mainClass':true,'darkstyleClass':isDarkStyle())" — K. Stefaniak, Jul 17 '18 at 08:33
Sass variables cannot be resolved at runtime, they've been precompiled in your CSS output. You will need to use native CSS variables or CSS classes for this to work. — Gorka Hernandez, Jul 17 '18 at 08:52
@KacperKapela in this case you will define classes or varibles with color value , the classes is much better — Muhammed Albarmavi, Jul 17 '18 at 09:02

לבני מלכה · Accepted Answer · 2018-07-17T08:54:17.253

4

Use [ngClass]

See stackblitz:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.html

.light{
background: white;
}
.normal{
background: #cfd8dc;
}
.dark{
background: #29434e;
}

in Html

<p [ngClass]="isDarkStyle() ? 'dark' : isLightStyle() ? 'light': isNormalStyle()?'normal':''">
  Start editing to see some magic happen :)
</p>

edited Jul 17 '18 at 08:54

answered Jul 17 '18 at 08:11

לבני מלכה

15,925
2
23
47

hey.. tell me for more help – לבני מלכה Jul 17 '18 at 08:12
but my CSS classes are way bigger. They don't have only one property. If i use ngClass i have to build 3 very big classes with only one change (which is background color) – Kacper Kapela Jul 17 '18 at 08:16
no! it add another class to the list(the selector will have tow class one yours and one the color) – לבני מלכה Jul 17 '18 at 08:18
i tried to run that code but it says ' { statement expected' – Kacper Kapela Jul 17 '18 at 08:27
see deit and see blitz:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.html – לבני מלכה Jul 17 '18 at 08:54
it doesn't work good. It overwrites my main big CSS class to one from these three little classes – Kacper Kapela Jul 17 '18 at 09:01
(https://pastebin.com/cfGhLkwy) And i want to change background-color of my "aside" class. – Kacper Kapela Jul 17 '18 at 09:06
but when I use ngClass it overwrites my 'aside' class to one of these three little classes with one property. – Kacper Kapela Jul 17 '18 at 09:09
see here:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.css – לבני מלכה Jul 17 '18 at 09:16
yes! that works as i expected! thank you so much man :) this '!important' really did difference :D – Kacper Kapela Jul 17 '18 at 09:22

score 1 · Answer 2 · answered Jul 17 '18 at 08:21

1

try solution

As I understood your queston:

HTML:

<h1 [ngStyle]="{backgroundColor: isDarkStyle() ? 'red' : isNormalStyle() ? 'green' : isLightStyle() ? 'white': ''}">Text</h1>

TS:

isDarkStyle() {
    return false
  }

  isNormalStyle() {
    return true
  }

  isLightStyle() {
    return true;
  }

answered Jul 17 '18 at 08:21

Akj

7,038
3
28
40

my code is working fine but i want this colors (red, green, white) to have in my CSS file – Kacper Kapela Jul 17 '18 at 08:29

Muhammed Albarmavi · Answer 3 · 2018-07-17T09:02:24.597

You can defined ngClass or ngStyle

ngClass required to define class in your style file

<h1>ngClass</h1>
<p [attr.class]="state">
  Start editing to see some magic happen :)
</p>
<button (click)="state = 'light'">light</button>
<button (click)="state = 'dark'">dark</button>
<button (click)="state = 'normal'">normal</button>

ngStyle you can change spisifc css properties like background-color

<h1>ngStyle</h1>
<p [ngStyle]="{'background-color':color}">
    Start editing to see some magic happen :)
</p>
<button (click)="color = '#fff'">light</button>
<button (click)="color = '#cfd8dc'">dark</button>
<button (click)="color = '#29434e'">normal</button>

stackblitz example

Angular 6, color from css file in ngStyle directive

3 Answers3