How to use component variable within css / style tag in Angular 2?

Question

How can I use component variables within style TAG in Angular 2?

I do have an Angular 2 component for my header which I like to color depending on a users setting. Thus I'd like to assign an background and font color. While I know how to to this with an attribute binding to an element, I couldn't figure out how to use in a style tag.

Using attribute binding for style works well, however this gets pretty anoying for several subelements, especially if they are nested within other sub components. [ngStyle]= attribute is also only working on a single element.

<header id="header" [style.background-color]="changeBackground()">
  <div>
    Some Text
    <a href="asdf">Some Link</a>
    <subcomponent></subcomponent>
  </div>
  <div> ... a lot mor stuff </div>
</header>

Thus I'd like to add something like

<style>
#header, #header a {
  color: {{mycolor}};
}
</style>

to the html template. However this is not working

Similar Questions do not answer this question yet and only show attribute binding as a solution:

`#header, #header a {` is a CSS selector that selects the element with the id `header` and it's child `` element. I wouldn't expect template variable to work within style tags. You should rather use `ngStyle`. Also binding to methods in the view `="changeBackground()"` is discouraged because it is called for every change detection cycle. Rather assign the result to a property and bind the view to the property instead. — Günter Zöchbauer, Nov 26 '16 at 12:42
Possible duplicate of [Angular2 dynamic change CSS property](http://stackoverflow.com/questions/33328347/angular2-dynamic-change-css-property) — PhoneixS, Feb 07 '17 at 17:07
I know this question is a bit old now, but this answer might help you https://stackoverflow.com/a/48265526/1389807 — tehlivi, Nov 13 '19 at 20:43

score 1 · Answer 1 · answered Nov 26 '16 at 08:45

1

It looks to me like you are just creating a new component called 'subcomponent', why not do that?

subcomponent.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'subcomponent',
  templateUrl: './subcomponent.html',
})
export class SubComponent {
  mycolor = 'blue';
}

subcomponent.html:

<style>
#header, #header a {
  color: {{mycolor}};
}
</style>

answered Nov 26 '16 at 08:45

ppovoski

4,553
5
22
28

1

Was my first thought too, but this is not working either. Angular extracts the style tag, inserts it into head and does not replace mustache variables in this part. :( – Manuel Nov 26 '16 at 08:48
Check out this SO question: http://stackoverflow.com/questions/2830296/, it may answer why angular is moving the style tag and how to work around it. – ppovoski Nov 26 '16 at 08:54
however it still does not replace the mustache variable in my case :/ – Manuel Nov 28 '16 at 10:32
@Manuel What issues are you still facing? Are you referring to the `{{mycolor}}` interpolation? – ppovoski Nov 28 '16 at 23:33
Yes, the HTML style block contains {{mycolor}} – Manuel Nov 29 '16 at 00:07
And you don't want to add a style to the `` tag in that template? – ppovoski Nov 29 '16 at 00:10
If i can choose, not! I'm using it in an admin theme which has a header build of several sub components. Each would have to load the data which is pretty ugly. – Manuel Nov 29 '16 at 00:14
Have a single parent pass the data to each of the children. – ppovoski Nov 29 '16 at 01:33
Same as first answer. This is not working. It write mustache code into css which results in an invalid css property value #header[_ngcontent-mpf-4] { background-color: {{currentPartner.partnerColorPrimaryBackground}} !important; } – Manuel Dec 02 '16 at 17:42
@manuel You're right this does not work. I'll update this with working code. But it won't be adding a style tag. What you are expecting to work, is not an option. I'll provide alternatives. – ppovoski Dec 03 '16 at 08:59
1

I'm experiencing this problem today. Can't believe there is still no way around it. – Andrew Howard Aug 03 '17 at 09:43

score -2 · Answer 2 · answered Nov 25 '16 at 23:46

-2

To your @Component object, add

styles:[ `#header, #header a {
  color: {{mycolor}};
}`]

So for example:

@Component({
  template: `<header id="header" [style.background-color]="changeBackground()">
    <div>
      Some Text
      <a href="asdf">Some Link</a>
      <subcomponent></subcomponent>
    </div>
   <div> ... a lot mor stuff </div>
  </header>`,
  styles: [ `#header, #header a {
    color: {{mycolor}};
    }`
  `]
})

answered Nov 25 '16 at 23:46

lastWhisper

462
3
6

1

This is not working. It write mustache code into css which results in an invalid css property value `#header[_ngcontent-mpf-4] { background-color: {{currentPartner.partnerColorPrimaryBackground}} !important; }` – Manuel Dec 02 '16 at 17:40

score -3 · Answer 3 · answered Nov 14 '17 at 12:26

-3

Use NgStyle as explained in this answer

https://stackoverflow.com/a/41903349

in short

<header id="header" [ngStyle]="getStyle()">
  <div>
    Some Text
    <a href="asdf">Some Link</a>
    <subcomponent></subcomponent>
  </div>
  <div> ... a lot mor stuff </div>
</header>

and

getStyle(): any {
    return {"background-color" : this.changeBackgroundColor()};
}

answered Nov 14 '17 at 12:26

Ehsan

21
10

Read the question. They do not want to use binding. – tehlivi Nov 13 '19 at 19:18

How to use component variable within css / style tag in Angular 2?

3 Answers3