I am working on angular 5 application, and I have requirement of applying dynamic css in style tag in template. I have tried some solutions but they are not working.
app
The given answer works if you have few elements to change in a given component, if you need to change the full overall look and feel of your app based on user's choice (and on the fly), the only way i found so far is to override css in the javascript like the following:
this.stylesService.get().subscribe(({ customStyles }) => {
const style = document.createElement('style');
style.innerHTML =
`.picture {
background-image: url(${customStyles.backgroundUrl});
}
h1, h2 {
color: ${customStyles.primaryColor};
}`;
document.body.appendChild(style);
});