@Component({
selector: 'app-style',
template: `
<style>
.test {
color: {{ textColor }}
}
</style>
`
})
export class StyleComponent {
textColor = "red";
}
This doesn't seem to be working and I need my styles to be dynamic and in some specific CSS class. Is there some other way I could do this?
You can use ngStyle directive like this maybe;
@Component({
selector: 'app-style',
template: `
<ul>
<li [ngStyle]="{color: textColor}">List Item</li>
</ul>
`
})
export class StyleComponent {
textColor = "red";
}
colorWhen the component is renderd the style tag will move to head element of the page and any angular syntax inside this element will be ignored.
the only way I have found is to create the style element dynamic and provide the desire style.
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>
You can access color style by [style.color] or specify a defined class in the style sheet [class] :
<div [style.color]="color">Style Test</div>
<div [class]="className">Class Test</div>
I had faced the same problem. In my case the use had and xml where he was changing the color and on load of application i was calling and api to read xml and get JSON object. I had categorized all elements color like PrimaryForeground, PrimaryBackground, PrimaryHover, etc. Once i got the json object I was updating the values of this variables.
If you want to load dynamically a css you can do "easy" At first attemp, (you have in assets folder "style1.css" and "style2.css") is only write in your app.component.html
<link rel="stylesheet" [href]='myStyle'>
...rest of tags...
//In your app.component.ts
myStyle="assets/style1.css"
But the problem is that your get an error "unsafe value used in a resource URL context", so you must use Domsatinizer. So
Your app.component like
<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(myStyle)'>
..rest of your div..
In your app.component.ts
import { DomSanitizer } from '@angular/platform-browser';
@Component({...})
export class appComponent{
myStyle="assets/style1.css"
constructor(public sanitizer: DomSanitizer) {}
}
