Angular 2+ dynamically generate css

Question

For a given js variable, which has style information in it:

menuBgColor = "red";

In AngularJS I was able to use dynamically embedded style:

<div>
   <style>
      .menuElement{
         background-color:{{menuBgColor}}
      }
   </style>
   <div class="menuElement">...</div>
</div>

In Angular2+ I cannot use the same as above. When the view is rendered in the browser variable menuBgColor is not populated and the element is rendered as coded.

like this -

<body>
...other markup...
<div><style>.menuElement{background-color:{{menuBgColor}}}</style>
...markup...
</body>

I want to know that what are the other ways in angular 2+ to add dynamic styles to the view?

I know of ngStyle but the given example is a very small one.
In my case, I have to apply dynamic styles to each element of the whole app like button, borders, background, colors, tree controls, sidebars etc. So ngStyle is very exhaustive.
I also do not have predefined theme files because theme is managed by a feature in our app where user can define his/her own theme. Here I understand that I can refresh page to get the updated theme BUT consider that there can be 'n' number of users with their own themes.
So in my use case, the only solution I can think of is that somehow variable interpolate and create an embedded css.

Any help is greatly appreciated.

I also thought about css preprocessors but in my case, I have to update it runtime whereas sass -> css happens compile time. — Ashwin, Dec 18 '17 at 12:10
change the style in head, http://ewoutreinders.com/index.php/angular-2-changing-stylesheets-in-the-tag-runtime/ — Eliseo, Dec 18 '17 at 12:13
idk what's wrong with ng-style - i would definetely prefere it to inline styles — Petr Averyanov, Dec 18 '17 at 12:17
there is nothing wrong with ng-style. But in my case, there are 1000 places to apply ng-style. Hence it is not feasible for me. — Ashwin, Dec 18 '17 at 12:19
@Eliseo - I have read that post. The example has predefined theme file created and in my case my user changes theme file on runtime. [theme.css is generated by the backend code on every save theme action]. — Ashwin, Dec 18 '17 at 12:24

score 2 · Answer 1 · answered Dec 18 '17 at 12:15

2

You can try this:

<div [style.background-color]="yourVar"></div>

In this case the binding should work

answered Dec 18 '17 at 12:15

axl-code

2,192
1
14
24

1

Good idea and I think this will work for many cases. But what if someone wants to set a style on a pseudo-element? Also the OP mentioned (and dismissed) ngStyle. – Raphael Schweikert Dec 18 '17 at 12:19
1

ok but there are many elements to style. It is exhaustive to add styles to around 1000 elements. – Ashwin Dec 18 '17 at 12:20

lenilsondc · Answer 2 · 2017-12-18T14:31:47.107

2

There's no pretty way to do this without building a huge structure like Angular Material does. But, if your theme system is not so complex, I'd simply go with a dynamically rendering of the <link> tag to your theme like so:

import { Component } from '@angular/core'
import { DomSanitizer } from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <link rel="stylesheet" [href]="getThemeUrl()">
    <div class="main">
        {{'themes/css/'+ theme +'.css' }}

        <select [(ngModel)]="theme" (change)="onThemeChanged(theme)">
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="yellow">Yellow</option>
        </select>
    </div>
  `
})
export class AppComponent {
    theme = 'red';

    constructor(public sanitizer: DomSanitizer){}

    getThemeUrl(){
        return this.sanitizer
            .bypassSecurityTrustResourceUrl('themes/' + this.theme + '.css');
    }
}

Plunkr

edited Dec 18 '17 at 14:31

answered Dec 18 '17 at 12:19

lenilsondc

9,590
2
25
40

1

It works perfectly, but only one problem with this is that the css file is re-requested on every UI interaction. Any way to avoid that? – Ashwin Dec 18 '17 at 12:22
@Ashwin maybe if you use `[href]="'/themes/css/' + theme + '.min.css'"` – lenilsondc Dec 18 '17 at 12:31
Having a problem with running your problem. It keep on saying "Loading...". as soon as I fix it I will update you. – Ashwin Dec 19 '17 at 08:34
@Ashwin anyways there's a plunkr with a working solution https://embed.plnkr.co/lsi1VPHFaLSEoZraQcAF?p=preview it's a version mismatch try to compare angular's version in the `system.config.js` file. – lenilsondc Dec 19 '17 at 10:11
I checked your plunkr and I am seeing one problem which I mentioned in my first comment i.e. when I have something else updating (like a variable interpolating) then the css file is requested again, if you could see that in Network tab. This gives a flickering UI on the screen. https://plnkr.co/edit/nV4WOR9efThiRs1V3gCK?p=preview – Ashwin Jan 05 '18 at 07:02

Angular 2+ dynamically generate css

2 Answers2