css - Angular2 dynamic style -

what dynamic styling.

imagine you're deploying unique plaftorm multiple clients. (saas platform)

you deploy 1 webapp folder these webapp must apply different theme (color) each client (exemple configuration : loading colors domain name).

in angular 2, there scss scss compiled language -> need compile each time each client compile n webapps. takes time , it's difficult maintain.

so solution see: - compile scss @ runtime (via remote server call, fe:jsass, or js) when loading app , inject generated css file in head section.

but think it's anti-pattern (s)css file angular2 components. generated file contains components style apply on entire page instead if component not initialized.

have got framework or other solution ?

you can achieve creating service return colors of structures want change , inject components

example inside component html:

<div [style.background-color]="themeservice.getnavbarcolor()"></div> 

and logic pattern each user when app starts , insert themeservice.

full example:

import { component } '@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()     } }