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 <a> 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
– Günter Zöchbauer, Commented Nov 26, 2016 at 12:42
I know this question is a bit old now, but this answer might help you stackoverflow.com/a/48265526/1389807 — tehlivi
– tehlivi, Commented Nov 13, 2019 at 20:43

ppovoski · Accepted Answer · 2016-11-26 08:45:13Z

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, 2016 at 8:45

ppovoski

4,8605 gold badges25 silver badges31 bronze badges

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

11 Comments

Manuel Over a year ago

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. :(

ppovoski Over a year ago

Check out this SO question: stackoverflow.com/questions/2830296, it may answer why angular is moving the style tag and how to work around it.

Manuel Over a year ago

however it still does not replace the mustache variable in my case :/

ppovoski Over a year ago

@Manuel What issues are you still facing? Are you referring to the {{mycolor}} interpolation?

Andrew Howard Over a year ago

I'm experiencing this problem today. Can't believe there is still no way around it.

|

lastWhisper · Accepted Answer · 2016-11-25 23:46:10Z

-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, 2016 at 23:46

lastWhisper

4773 silver badges6 bronze badges

1 Comment

Manuel Over a year ago

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; }

Ehsan · Accepted Answer · 2017-11-14 12:26:44Z

-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, 2017 at 12:26

Ehsan

2110 bronze badges

1 Comment

tehlivi Over a year ago

Read the question. They do not want to use binding.

Collectives™ on Stack Overflow

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

3 Answers 3

11 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related