@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) {}
}
Check out this demo where the CSS is applied to the :host element or <hello>. The font size increases but the background color remains unchanged. What do you think? styles: [` :host { font-size: 2rem; background-color: yellow; }`] }) ...
I am currently facing an issue while attempting to incorporate Syncfusion's EJ2 components into an Angular application. I have encountered a roadblock with the DropDownList component, as certain features are not well-documented at this time. I noticed ...
Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...
I am working with a select list that contains names, and I need to extract the name instead of the ID in order to insert it into the database. Below is my TypeScript file: selectUser() { this.UtilisateurService.findAll().then((res) => { let ...
After using JavaScript to adjust the opacity of an element from 0 to 1, I expected it to instantly disappear and then slowly fade back in. However, nothing seems to happen as anticipated. Interestingly, if I insert a setTimeout function before applying th ...
Seeking guidance on incorporating toast messages within an Angular + Ionic 6 application... My goal is to display a toast message in response to events such as clearing a cart or submitting an order, with the message originating from an API call. While a ...
What is the reason behind an SVG requiring at least 2 areas to be padded for padding to apply? For instance, applying padding-top: 50px to an svg element will have no effect. However, adding padding-top: 50px; padding-left: 1px will result in the padding ...
I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...
I have a page with Play, Pause, Resume, and Stop icons. When I click on the Play icon, the Pause and Stop icons are displayed. Similarly, I would like to show the Resume and Stop icons when I click on the Pause icon. I need help with this code. Thank you. ...
Currently, I am in the process of updating my Ionic 2 component known as ionic2-autocomplete. This component was initially created for RC.4 and earlier iterations, and now I am working on migrating it to Angular 2 final. One key aspect of the original des ...
I've encountered an issue on small devices with the Bootstrap card. I'm using a hover effect to slide up the content, but on small devices, the content is cutting off the image. I'm not sure how to position the content directly after the ima ...
Is there a CSS property or list style that can display an expanding list? For example: Order now for a discount! <ol style="list-style: none"> <li>* Available only for the first 12 months</li> <li>** Only for new customers ...
<script type="text/javascript"> $(document).ready(function(){ updateContent(); }); function updateContent(){ $('#mainDiv').load('home.php', function(){ scrollToTop(); }); } ...
I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...
I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...
How can I dynamically select and manipulate groups of elements? My intention is to select and modify the msgpvtstyleme elements, then select the msgpvtstyle elements separately and work with them as well. The ultimate goal is to apply classes to these grou ...
I have been working on deploying an Angular 7 + Spring Boot application as a war file to Tomcat. I followed the necessary steps to package the code into a war successfully, including the UI code. However, despite creating the war file with UI components, I ...
(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...
Currently, I am working on aligning and positioning my items using CSS. However, I'm a bit confused about the right approach. Here is a demo of my current progress: Demo Link I aim to achieve a layout similar to this sketch: Sketch Image Apologies ...
I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...