Can we leverage Angular service styles in scss?

I am working on a change-color.service.ts file that contains the following code snippet:

public defaultStyles = {
    firstDesignBackgroundColor: '#a31329',
    firstDesignFontColor: '#ffffff',
    secondDesignBackgroundColor: '#d1cfcfff',
    secondDesignFontColor: '#000000'
  };

Currently, I want to update my style.scss file with the following statement:

:host ::ng-deep th span#optimize-checkbox-header .mat-checkbox label.mat-checkbox-layout .mat-checkbox-inner-container.mat-checkbox-inner-container-no-side-margin .mat-checkbox-frame {
  border: 2px solid #fff !important;
}

The task is to replace the color value #fff with the variable firstDesignFontColor from the change-service. Is it feasible to create this dependency? Any suggestions or solutions would be appreciated.

cssangulartypescriptsass

Answer №1

If you're looking for a way to achieve this using CSS variables, I have a solution that I will share in another response.

By utilizing JavaScript, it is possible to modify CSS variables. For instance, consider the following example:

:root {
  --bg-color: red;
}

.test {
  background-color: var(--bg-color);
}

You can implement this functionality within your ChangeColorService:

interface Colors {
  background: string;
}

@Injectable()
export class ChangeColorService {
    colors$ = new BehaviorSubject<Colors>({ background: 'red' });

    constructor(@Inject(DOCUMENT) private document: Document) { }

    change(colors: Colors) {
      const root = this.document.documentElement;
      root.style.setProperty('--bg-color', colors.background);
      this.colors$.next(colors);
    }
}

For a complete demonstration, check out this example: https://stackblitz.com/edit/angular-change-css-variable?file=src/app/app.component.ts

Answer №2

Unfortunately, achieving that is not an option. However, you can utilize style bindings instead.

class CustomComponent {
    customStyles: any;
    constructor(private theme: ThemeColors) {}
    ngOnInit() { this.customStyles = this.theme.defaultPalette; }
}

<div [style.background-color]="customStyles.primaryColor"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There is a delay in updating ng-if/ng-hide in real time on the HTML page

Assistance needed for implementing a slight adjustment in AngularJS with TypeScript. The requirement is to change the text of a button for 3 seconds upon clicking, then revert back to its original text. Two HTML elements are created for this purpose, each ...

javascriptangularjshtmltypescript

Is there a way to have a fixed width div positioned in the center of the screen, with two additional divs on either side

I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...

htmlcss

JavaScript placeholder-type expression

Hey there, I am a C++ developer who is venturing into the world of JavaScript. While exploring JavaScript syntax, I stumbled upon something that resembles templates in C++. For example, while going through RxJs tutorials, I came across this line of code: ...

javascripttypescriptflowtype

Angular 17 isn't notifying child component of signal changes

In the statistics module, I have a signal that specifies the type of charts to display and this signal is updated through a radio button group. The signal: typeSignal = signal<string>('OIA') The radio buttons for setting the : <div clas ...

angulartypescriptangular17

Encountering difficulties when attempting to start a new project in Angular

I am encountering an issue while trying to create new in Angular, using version 6 and Node.js v8.11 Here is the console log: Unable to save binary /home/amit/demo/node_modules/node-sass/vendor/linux-x64-57 : { Error: EACCES: permission denied, mkdir ...

node.jsangularnpmangular-cli

Launching Angular 7 on github pages

I am facing an issue with my Angular 7 app that features two routes: the main route and the 'article' route. While the app functions perfectly when tested locally, it fails to load the page's css when deployed on GitHub pages. I followed the ...

angulargithub-pagesangular-routingangular7

What is the proper way to utilize a custom property that has been incorporated into my Pinia stores in a Typescript project?

Currently utilizing Vue 3 alongside Pinia; my api service is utilized for making requests to the api. I have included it as a property to ensure availability across all stores: In my main.ts file: import { http } from "@/services/http"; const s ...

typescriptvuejs3pinia

``Why Ionic 3 Popover Sizes Should Adapt to Different Screen

Currently in my Ionic 3 project, I am utilizing a popover with a set height using the following code snippet: editOpty(rw){ let popover = this.editOptyPopup.create(EditOptyPopoverComponent, rw, { cssClass: 'edit-opty-popover'}); popover ...

cssangulartypescriptsassionic3

The navigation bar struggles to display list elements without proper line breaks

Recently, I've been immersed in a web development project for a company. For the navigation bar, I opted to use the FlexNav JQuery plugin. While referencing the example on , I encountered an issue when attempting to add more than 5 list elements; they ...

jqueryhtmlcss

A guide on transforming a Firebase Snapshot child into a personalized object in a React Native environment

I'm looking for a way to retrieve data from Firebase Realtime Database and display it in FlatList format. What is the most efficient method for extracting the child value and converting it into a custom object? For example: class CustomObject { ...

typescriptfirebasereact-nativefirebase-realtime-database

The positioning of the menu icons varies

When it comes to displaying the search icon in the WordPress toggle bar, I use a custom JavaScript file. This setup is mainly focused on website design and menu functionality. Additionally, I have integrated a newsletter subscription plugin for managing su ...

javascriptjqueryhtmlcsswordpress

Exploring the possibilities of updating carousel items in Angular using Bootstrap

I'm working on a project where I have 4 images and a carousel that needs to navigate to the respective index when one of the images is clicked. The challenge is that the carousel is built with Bootstrap and jQuery, but the rest of the application is A ...

angulartypescriptbootstrap-4carouselelementref

Tips on fixing image movement when scrolling and switching resolutions

I am currently working on developing my HTML/CSS portfolio. However, I am facing an issue where the images on the site move around whenever the scroll level or resolution size is changed. I want the images to remain in their respective blocks, displayed at ...

htmlcssimageresponsive-design

A guide on exposing TypeScript classes globally through a WebPack bundle in JavaScript

Currently delving into TypeScript, my aim is to gradually replace JS with TS. However, due to having numerous JS files, my strategy involves creating new classes in TS and incorporating them into my existing JS files for the time being. Eventually, I plan ...

javascriptnode.jstypescriptwebpackgulp

Converting FormBuilder object to a generic object

Is it possible to convert FormBuilder values into an object model? this.form.value= this.modelObject; -> simply does not work let objectModel: ObjectModel = new ObjectModel(); objectModel.objecta = "valueA"; objectModel.objectb = "valueB"; this.for ...

angularobjectcasting

Preventing an ngrx effect from running when the user logs out

One challenge I am facing involves the dispatch of actions for loading data when a user logs in. The action is captured by an effect like this: getData$ = createEffect(() => this.actions$.pipe( ofType(Actions.getData), exhaustMap(() =& ...

angularreduxngrxngrx-effects

What is the best way to reduce the spacing between text?

I am trying to figure out how to reduce the spacing between my text so that it aligns like the example below. Take a look at the text "Welcome to my portfolio". Currently, when I run my code, there is a large gap between "Welcome to my" and "Portfolio". ...

htmlcss

Encountering issues while attempting to transmit several files to backend in React/NestJS resulting in a BAD REQUEST error

My goal is to allow users to upload both their CV and image at the same time as a feature. However, every time I attempt to send both files simultaneously to the backend, I encounter a Bad Request error 400. I have made various attempts to troubleshoot th ...

javascriptreactjstypescriptnestjsbackend

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

I'm encountering a TypeScript error while working with React that's leaving me puzzled: <html>TS2339: Property 'subEnd' does not exist on type 'SetStateAction&lt;User&gt;'.<br/>Property 'subEnd' d ...

javascriptreactjstypescriptobjectsetstate

The Angular application has encountered a stack overflow due to exceeding the maximum

./src/main.ts - An issue occurred: The module build process failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Maximum call stack size exceeded import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; { App ...

angulartypescriptmoduleng-modules