Angular2 dynamic style

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 ?

SCSS is only compiled once (When you build your app) into CSS file. Same goes for the Typescript files, compiled and minified into one JS file. — YounesM
– YounesM, Commented Apr 6, 2017 at 12:54
You should create a custom RootRenderer, that will handle compiling sass or use custom css files. To do that, you will need to create a new platform, that's a big task I never did. See how it works in browser platform. And there is a speach about custom renderers at ng-europe — n00dl3
– n00dl3, Commented Apr 6, 2017 at 13:15

Cassiano · Accepted Answer · 2017-04-06 13:05:09Z

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()
    }
}

edited Apr 6, 2017 at 13:05

answered Apr 6, 2017 at 12:58

Cassiano

491 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jimmy Pannier Over a year ago

Yes but it's pity to have to specify colors in non styles files. In the Google Web Toolkit (GWT) world you can evaluate value in GSS file. Im' surprised that there is no equivalent.

Cassiano Over a year ago

Indeed it's pity, but I don't know another way to dinamically change the CSS in production on Angular

Bato-Bair Tsyrenov Over a year ago

I am trying to achieve the same thing, this project has dynamic themes github.com/akveo/nebular but the sass code is rather complicated @cassiano

Collectives™ on Stack Overflow

Angular2 dynamic style

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related