Angular2 dynamic style - css

Question

What about dynamic styling.
Imagine you're deploying a unique plaftorm for multiple clients. (SAAS platform)
You deploy ONE webapp folder but these webapp must apply a different theme (color) for each client (exemple configuration : loading colors by domain name).
In angular 2, there is scss but the scss is a compiled language -> so you need to compile each time for each client to compile N webapps. It takes time and it's difficult to maintain.
So the only solution i see:
- compile scss at runtime (via remote server call, fe:jsass, or js) when loading app and inject the generated css file in head section.
but i think it's an anti-pattern with the (s)css file for angular2 components.
Moreover the generated file will contains components style that will apply on entire page instead even if component is not initialized.
Have you got any framework or other solution ?

Answer 1

You can achieve this creating a Service that return the colors of some structures that you want to change and inject it into the Components
Example inside the component html:
<div [style.background-color]="themeService.getNavbarColor()"></div>
And do some logic to get the pattern for each user when App starts and insert into the ThemeService.
Full Example:
import { Component } from '#angular/core'
#Component ({
selector: 'my-component',
templateUrl: './my-component.component.html',
})
export class MyComponent {
constructor( private themeService: ThemeService){}
}
#Injectable()
export class ThemeService {
backgroundColor: string
getNavbarBackgroundColor: string() {
return this.backgroundColor;
}
someLogicToGetTheme() {
//do stuff
}
ngOnInit() {
this.someLogicToGetTheme()
}
}