Is it feasible to send a variable to a CSS class in an external CSS file within Angular 2, such as:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
bgc: string = 'orange'
}
then on the "app.component.css" I would like to pass like
.mydiv{ background: {{bgc}}; }
Can this be done?
It seems unlikely that this can be achieved.
If you are interested in dynamically changing styles, I recommend exploring the ngStyle directive provided in the following link:
https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html
Encountered a similar unresolved query in another question thread: Absolute module path resolution in TypeScript files in Visual Studio Code. Facing the same issue with "typescript": "^4.5.5". Here is the content of my tsconfig.json: { ...
I was able to create a select menu using only CSS, following some code I found. However, I am now facing an issue with overlaying divs. Whenever I hover or click on the "select menu", all the divs below it move down. I've attempted to adjust the z-i ...
There seems to be an issue with displaying the highlighted text, and I'm not sure why. Links: <link rel=stylesheet href="http://codemirror.net/mode/php/../../doc/docs.css"> <link rel="stylesheet" href="http://codemirror.net/mode/php/../../l ...
Currently, I am faced with a challenge involving drag and drop TEST. Observing the image provided below, you will notice 3 columns each containing 3 small boxes of varying colors. These boxes are draggable, meaning they can be moved between columns follow ...
I have encountered an issue with my dockerized angular project. Upon starting my container, it appears that the 4200 port is already in use, even though the CMD command within the container does not initiate the application startup. Here is how my Docke ...
Struggling to deploy my react-express application on Azure. The code is divided into client and server directories. Attempted deployment using Azure Static Web application but encountered failure. https://i.stack.imgur.com/ailA0.png https://i.stack.imgur.c ...
I've encountered an issue with my Angular app where it displays a 500 server error. Here are the methods I'm using: /*Product Service*/ addNewProduct(newProduct: Product): Observable<Product> { console.log(newProduct); return this.http.po ...
Ensuring that users can only input numbers is functioning properly. If a user attempts to enter anything other than a number, an error message should be displayed. I have experimented with Validators and patterns, but I am unable to get the error message ...
Having issues with casting objects from an HTTP API response to Typescript. I am trying to cast the json data to a Typescript object using the "as" keyword or <Type >, but it's not working as expected. r.forEach(entry => { entry.creatio ...
I am facing a challenge in extracting both the product name and price from the given data. The desired result, which includes both the product name and price, is not on the same line. How can I include the line that comes before the price as well? Here is ...
I am currently facing an issue where I need to navigate to the same component with different parameters. Although I can subscribe to the params through the ActivatedRoute, I'm encountering a problem when trying to call router.navigate within the subsc ...
When working with jQuery, I have a CSS style targeting a specific div: div.right-sm:hover{background-color: blue} Now, I am trying to prevent the hover effect using jQuery: $(this).parent('div').removeClass('right-sm:hover'); Howev ...
In my current project, I am looking to add a feature that allows users to choose the color scheme of the software. While the choices are currently limited, I plan to implement a color picker in the future to expand the options available. So far, I have ex ...
I have a website frontend integrated from WordPress using an HTML 5 Blank Child Theme. The site features a logo effect utilizing particle slider for screen sizes greater than 960px, and a flat logo image for screen sizes less than 960px. Everything works p ...
My goal is to adjust the style according to the screenshot below. This is what I expect: However, this is what I currently have: As you can see, the border bottom of the last column is not applied as expected. I have tried using the props provided by r ...
Looking to design a header image for my website that always stays centered. I want the image to stand out and remain in the middle even when the browser window is resized. I found an example on this website that achieves this effortlessly. ...
Is there a way for TypeScript to validate the function body against function overloads? Despite having multiple signatures, it seems that the function implementation is not being checked properly: function a(input: string): string function a(input: number ...
I have successfully created a tooltip using Angular 5.2.0 and ngrx. The tooltip, among other things, receives an ElementRef to the target Element when the state updates, allowing me to position it absolutely: let rect = state.tooltip.target.nativeElement. ...
Help Needed! Can someone tell me how to specify a CSS3 file for validation by the W3C? In HTML5, we use <!DOCTYPE html>, but what should we use in a CSS file? Whenever I try to validate my CSS file containing CSS3 elements like @font-face and box- ...
I have developed a function that scales down the font size until the text width is smaller than the canvas width. This text is then added to a canvas containing a QR code. Subsequently, this canvas is included in a PDF file. The issue I am encountering i ...