@Component({
selector: 'app-style',
template: `
<style>
.test {
color: {{ textColor }}
}
</style>
`
})
export class StyleComponent {
textColor = "red";
}
The current method doesn't appear to be functioning as intended. I am in need of dynamic styles within a specific CSS class. Is there an alternative approach that can achieve this?
If you want to apply styling dynamically in Angular, you can utilize the ngStyle directive as shown below:
@Component({
selector: 'app-style',
template: `
<ul>
<li [ngStyle]="{color: textColor}">List Item</li>
</ul>
`
})
export class StyleComponent {
textColor = "red";
}
After the component is rendered, the style tag will be moved to the head element of the page and any Angular syntax within this element will be disregarded.
The only method I have discovered is to dynamically create a style element and input the desired styles.
app.component.ts
textColor = 'red';
constructor(private el: ElementRef) {
}
ngOnInit() {
let style: string = `
.test {color :${this.textColor}; }
`;
this.createStyle(style);
}
createStyle(style: string): void {
const styleElement = document.createElement('style');
styleElement.appendChild(document.createTextNode(style));
this.el.nativeElement.appendChild(styleElement);
}
app.template.html
<span class="test">test</span>
To access color style, you can use [style.color] or specify a defined class in the style sheet using [class]:
<div [style.color]="color">Test Style</div>
<div [class]="className">Test Class</div>
Dealing with a similar issue, I encountered a situation where a user was altering colors in an XML file. Upon application load, an API call was made to retrieve the XML and convert it into a JSON object. I had organized all color elements into categories such as PrimaryForeground, PrimaryBackground, PrimaryHover, etc. Once the JSON object was obtained, I proceeded to update the values of these variables accordingly.
If you're looking to dynamically load a CSS file, there's a simple way to do it. Let's say you have "style1.css" and "style2.css" in your assets folder. All you need to do is add the following code snippet to your app.component.html:
<link rel="stylesheet" [href]='myStyle'>
...rest of tags...
//In your app.component.ts
myStyle="assets/style1.css"
However, you may encounter an error stating "unsafe value used in a resource URL context." To resolve this issue, you'll need to use DomSanitizer like so:
Your app.component should look like this:
<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..
And don't forget to import DomSanitizer in your app.component.ts file:
import { DomSanitizer } from '@angular/platform-browser';
@Component({...})
export class AppComponent {
myStyle = "assets/style1.css";
constructor(public sanitizer: DomSanitizer) {}
}
Whenever I attempt to execute npm install, I encounter the following error: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfe ...
{{element.createdAt | date: 'MM/dd/yyyy h:mm'}} why are the dates in the database all showing as 23 but some values are displaying as 24? Please confirm. The first two values created in the db show a createdAt time of 3, but the table is showing ...
Trying to implement a loading overlay in an Angular project within a specific div rather than covering the entire page. Here's a Fiddle illustrating my current progress: #loader-wrapper { top: 0; left: 0; width: 100%; height: 100%; ...
I came across this CodePen example by dsholmes and made some modifications: Here Furthermore, I have developed my own form on another CodePen pen: Link The issue I'm facing is related to the placeholders/labels not disappearing when typing in text f ...
I encountered some gyp errors when trying to run "npm install" in my Angular 5 project. I'm not sure why these errors are occurring; perhaps someone here has seen similar issues before. https://i.stack.imgur.com/mMRO4.png I attempted various trouble ...
I'm currently developing a tutorial page using Angular where I intend to display code snippets in various programming languages such as 'Java', 'TypeScript', 'C#', and 'Html'. Although there is a snippet called ...
I'm struggling to utilize my ApiService class, which handles API requests, in another class. Unfortunately, I am encountering a roadblock as the constructor for ApiService requires an HttpClient parameter. This means I can't simply create a new i ...
Currently, I am faced with a dilemma regarding some CSS hover effects and table formatting. Despite successfully implementing most aspects of the design, there is an issue with how different browsers interpret padding within elements during color changes o ...
I have put together a small StackBlitz project to showcase my current situation. My aim is to log all objects that fall within a specified date range. However, when I attempt to filter my objects, I am faced with an empty array as the result. I would like ...
Currently, I am using a specialized mat-input-currency format directive to automatically convert my field inputs into currency. You can find the npm repository here. However, the directive binds the element data to [value] of the input, and I require it t ...
Every time Chrome releases an update, I encounter a recurring issue. Allow me to paint the picture: All browsers are at version 83 of Chrome Chrome announces that version 84 is on its way, but it has not been released yet. A new ChromeDriver 84 is rolled ...
Our test codebase is quite large, with around 10,000 lines of JavaScript code. In certain situations, we find it necessary to disable Protractor-to-Angular synchronization using the following line of code: browser.ignoreSynchronization = true; However, o ...
When using material UI, the progressbar demo includes lines of JSX code like this: '& > * + *': { marginTop: theme.spacing(2), }, Can you explain what the selector '& > * + *' represents in this context? ...
There has been plenty of back-and-forth regarding this issue, with proposed solutions ranging from pure CSS to pure HTML. Some can get quite complex, involving deeply nested divs and intricate CSS rules. I'm looking for a simple and uncomplicated answ ...
Is it possible to add a slick lightbox to a slider that only contains a div with a background image, but the lightbox doesn't display the image? What are your thoughts? $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, ar ...
I have recently been tasked with creating a Web Based CRM Software and I plan to use PHP and MYSQL as my backend. For the frontend, I am considering using a UI framework such as jQuery Mobile. I like that it is fully AJAX-driven, easy to code with, and has ...
While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...
I'm facing an issue with my server.js files. One of them is located inside the backend folder, and when I run nodemon server.js on localhost:3000, everything runs smoothly. I start Angular by running ng serve inside the angular folder, and logging int ...
I was looking for a way to add a vertical scrollbar to my table, and I ended up wrapping the entire table in a div. The result was that the table head was fixed in position. Is there a simpler method to include a scrollbar in a table without affecting the ...
I have a list of different phrases like the ones below: ['rainy_days', 'sunny_skies_and_birds', 'crimson_leaves_or_yellow_flowers','blue_clouds_in_that_sky'] If given a specified set of keywords such as ['and ...