Using Angular 6 to access colors defined in a CSS file through the ngStyle directive

Question

Using Angular 6 to access colors defined in a CSS file through the ngStyle directive

I am looking to utilize the color defined in my CSS file for my ngStyle directive in my HTML code.

Below is the current setup in my HTML:

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

Here are the color definitions from my CSS file:

//colors for background

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

What I want is:

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

Is there a way I can make this work? Appreciate any help you can provide. Thank you :)

html css angular ng-style

Answer 1

Answer №1

Utilize the [ngClass] directive

Check out the live example on stackblitz:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.html

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

within the Html structure

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

Answer 2

Utilize the [ngClass] directive

Check out the live example on stackblitz:https://stackblitz.com/edit/hello-angular-6-refjye?file=src%2Fapp%2Fapp.component.html

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

within the Html structure

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

Answer 3

Answer №2

check out the solution

From my understanding of your query:

Here is the HTML code snippet:

<h1 [ngStyle]="{backgroundColor: isDarkMode() ? 'black' : isNormalMode() ? 'blue' : isLightMode() ? 'yellow': ''}">Sample Text</h1>

Corresponding TypeScript logic:

isDarkMode() {
    return false;
}

isNormalMode() {
    return true;
}

isLightMode() {
    return true;
}

Answer 4

check out the solution

From my understanding of your query:

Here is the HTML code snippet:

<h1 [ngStyle]="{backgroundColor: isDarkMode() ? 'black' : isNormalMode() ? 'blue' : isLightMode() ? 'yellow': ''}">Sample Text</h1>

Corresponding TypeScript logic:

isDarkMode() {
    return false;
}

isNormalMode() {
    return true;
}

isLightMode() {
    return true;
}

Answer 5

Answer №3

You can utilize either ngClass or ngStyle

ngClass is necessary to specify a class in your stylesheet

<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 allows you to change specific 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>

Check out this stackblitz example

Answer 6

You can utilize either ngClass or ngStyle

ngClass is necessary to specify a class in your stylesheet

<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 allows you to change specific 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>

Check out this stackblitz example

Using Angular 6 to access colors defined in a CSS file through the ngStyle directive

Answer №1

Answer №2

Answer №3

Similar questions

The selected option in Bootstrap is displayed twice in the Bootstrap modal

Validating Email Addresses and Passwords Using JavaScript

Tips for formatting numbers in Angular 2 using TypeScript

Increase the padding and add a border to separate the list items in bootstrap 4

Saving information in the database without using a form

Controlling the first displayed page with JQuery Multi-Page functionality

Incorporate dc.js into your Cumulocity web application

Apply a CSS class once a TypeScript function evaluates to true

Issues with the CSS styling

Challenges with implementing @Html.EditorForModel

Struggling with clicking on an <a> tag using Python Selenium that leads to a popup dialog box

Display various sets of data from multiple models within a single view

I want to hide jqvmap when viewing on mobile devices

Am I using the if statement correctly?

How can you delete using JavaScript by pressing the "Delete" key?

Do overlay elements have to be positioned at the bottom of the HTML body every time?

Implementing a stylish gradient background with HTML 5 progress bar tag

Tips for invoking a function from a JavaScript file within an Angular component

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

Angular2 - using one centralized store to manage state across multiple components with unique API calls