Step-by-step guide on importing CSS into TypeScript

I have a global CSS file where I've defined all the colors. I attempted to import that value into TypeScript but it didn't work. This is my latest attempt:

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          '@import' : 'src/styles-library/colors-variables.scss',
          'background-color': '$primary-lightest-color'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

Whether with or without importing, it still hasn't worked.

angulartypescriptsass

Answer №1

When you are in the process of building, remember to transpile it into CSS and then connect that file in your index.html page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dist/colors-variables.css">
</head>
<body>
</body>
</html>

Answer №2

When using sass variables, they will be compiled during the build and not accessible at run time. In such cases, CSS variables can be utilized instead 😃

style.scss

:root {
  --primary-lightest-color: brown;
}

sideWindowStyle 

get sideWindowStyle(): any {
    switch (this.windowStyle) {
      case 'classicStyle': {
        return {
          'background-color': 'var(--primary-lightest-color);'
        };
      }
      case 'lightStyle': {
        return {
          'background-color': '#ffffff'
        };
      }
      default: {
        return {
          'background-color': '#f1f9fe'
        };
      }
    }
  }

CSS variables MDN 🎯

Answer №3

To achieve the desired style when window.style is a class in the template, you can utilize the Host property:

:host(.classicStyle) { 'background-color': '$primary-lightest-color' }
:host(.lightStyle) { 'background-color': '#ffffff' }
background-color: '#f1f9fe'

This code snippet will automatically update the background-color property when either of these two classes are present on the container of your element.

If window.style is a TypeScript object, then based on its value, change the host element's class to classicStyle or lightStyle, and the provided host code will take effect.

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

The issue of "Invalid arguments passed to jsPDF.text" encountered while using jsPDF on an nginx server

In my project admin, I have successfully implemented jspdf. The admin panel works perfectly fine on localserver. However, when I deploy it to a live nginx server, the server side throws an error: Error: Uncaught (in promise): Error: Invalid arguments passe ...

angularjspdf

Several mat-radio-button options chosen within mat-radio-group

`<mat-radio-group [ngClass]="cssForGroup" name="test"> <mat-radio-button *ngFor="let option of options | filter:searchText" class="cssForRow" [value]="option" ...

angulartypescriptangular-materialradio-buttonradio-group

Issue with border radius in MUI 5 affecting table body and footer elements

Currently, I am diving into a new project utilizing React version 18.2 and MUI 5.10.3 library. My main task involves designing a table with specific styles within one of the components. The table header should not display any border lines. The table body ...

cssreactjstypescripthtml-tablematerial-ui

Where Should akitaConfig Be Placed in Angular Development?

Despite my attempt to place akitaConfig directly in the constructor of my app.component.ts file, I am encountering issues with it not properly configuring the data stores created afterwards. My goal is to set resettable to be universally true. Currently, t ...

angularangular-akitaakita

Encountering TS1204 error on version 1.5.0-beta with ES6 target, yet all functionalities are running smoothly

After successfully compiling everything from Typescript to ES6 to ES5, I encountered an error that has me stumped. The error message reads as follows: Error TS1204: Cannot compile external modules into amd or commonjs when targeting es6 or higher. Here i ...

typescripttypescript1.5

Retrieve information from a Firestore document using the document's unique identifier

Running into some issues with my Angular 6 and Ionic 4 app while trying to retrieve specific data from Google Cloud Firestore. I've set up "cards" to display various stats retrieved from the Firestore database. You can see an example of how my cards a ...

angularionic-frameworkgoogle-cloud-firestorengfor

Exploring the Secrets of JSON Parsing in Angular

In my Angular application, I have the following JSON: var alphas = { "Data": { "1" : { "abc": { "key1":"Value1", "key2":"Value2", ...

jsonangulartypescript

Display embedded ng-template in Angular 6

I've got a template set up like this <ng-template #parent> <ng-template #child1> child 1 </ng-template> <ng-template #child2> child 2 </ng-template> </ng-template> Anyone know how t ...

angulartypescriptangular6

Instructions for compiling node-sass within the present directory for specific files

In my project, the directory structure looks like this: - folder1 - styles1.scss - folder2 - styles2.scss I want to utilize node-sass through the command line to generate the following output: - folder1 - styles1.scss - styles1.css - folder2 ...

cssnpmsassnode-sass

The parameter type 'Event' cannot be assigned to the argument type

edit-category-component.html: <custom-form-category *ngIf="model" [model]="model" (onSaveChanges)="handleChanges($event)"></custom-form-category> <mat-loader *ngIf="!model"></mat-loader> edi ...

htmlangulartypescriptforms

Exploring the location of unit testing within async-await in Angular applications

I have been working with Angular 9+ along with karma test runner and jasmine test framework for my unit tests. My focus is on unit testing only the app component which includes dependency injection: app.component.ts import { Component, EmbeddedViewRef } ...

angularunit-testingasync-await

Angular2 - Easily update form fields with just a click

I have a form that retrieves data from a service and presents it in the following format: @Component({ selector: 'profile', template: `<h1>Profile Page</h1> <form [ngFormModel]="myForm" (ngSubmit)="onSubmit()" #f="ngFor ...

angular

Tips on using Visual Studio Code to troubleshoot Angular 4 unit tests

I am working on an Angular 4 project with Material design in Visual Studio Code. The setup is done using angular/cli. Currently, I have been writing unit tests using Karma and Jasmine. However, when trying to debug the tests by setting breakpoints, it doe ...

javascriptangulartypescriptkarma-jasmine

Is the window.location.href of a component not inside a router-outlet updated after a router redirect through a guard?

The navigation component I have is positioned outside of the router. It utilizes a reusable icon component that depends on absolute URLs to point to SVG icons, retrieved through a getter within the component: public get absUrl(): string { return windo ...

angularangular-routerangular-changedetectionvirtual-dom

Retrieving updated data from a service does not trigger a refresh of the view

Having an issue with rendering data obtained from a service. Here is the situation: The service retrieves values from a distant API using an Observable: @Injectable() export class myService { constructor(private http: Http) { } getData(listLength: num ...

angularhttpservice

Protractor experiencing difficulty in adjusting price slider

As a newcomer to protractor, I am attempting to test a price slider that sorts products based on the provided price range. Unfortunately, I am facing difficulty in dragging the slider (min point) using protractor. Can anyone provide guidance on how to move ...

javascriptreactjsangularseleniumprotractor

Is it possible for the *ngIf directive to stop unauthorized users from accessing my admin page through their browsers?

When the *ngIf directive is set to false, a certain element or component will not be included in the DOM. For example, let's say there is a component that displays admin tools and should only be accessible to authorized users (administrators). Will se ...

javascriptangular

Steps for incorporating jQuery files into Angular 4

As a beginner in Angular 4, I am faced with the challenge of calling a jQuery function using an HTML tag from a method. The jQuery method is located in a separate file. How can I incorporate this into my Angular project? Here's an example: sample() { ...

jqueryangulartypescript

Adapting imports in Typescript for seamless npm distribution

Currently, I'm facing an issue with module resolution while compiling my NPM package written in Typescript for publishing. In my project, I've been using non-relative imports to avoid the hassle of excessive ../../../. However, according to TypeS ...

javascriptnode.jstypescriptnpmnpm-publish

Displaying icons representing different countries using Angular framework

Seeking assistance with Angular - I obtained a collection of country icons (svg format) from flat icon and intend to display them based on the respective countries in my project. With 870 icons, what would be the simplest approach to accomplish this with ...

angularflagscountry