1

I am using Angular2, I would like to set the style dinamically using property names in component. Following is what I have tried, but it is not working. 

<span class = "label" [style.background-color]="property1+'_css'">{{property1}} </span> <span class = "label" [style.background-color]="property2+'_css'">{{property2}} </span> export class ABC implements OnInit, OnChanges { property1 : string = "#f89406"; property2 : string = "#3a87ad"; }

If someone knows about it, could you give some advice?

I rephrazed my words, I wanted to change background color according to item name like codes below. I have properties like below in the component. item1, item2 and item3 points to {{item.name}} in the template. It is fine to code statistically css name according to item name. But I do want to suffix with _css for those properties. So, I put '_css' at the end. Also, right to the [style.background-color] is not the property defined directly in the component, it is variable defined in the ngFor of template.

<tr *ngFor="let item of items"> <b><span class = "label" [style.background-color]="item.name+'_css'">{{item.name}}</span></b> </tr> export class ABC implements OnInit, OnChanges { item1_css : string = "#f89406"; item2_css : string = "#3a87ad"; item3_css : string = "#2283c5"; }
Improve this question
5
  • What's the problem? What is the purpose of the '_css' part? Commented Jan 24, 2017 at 13:41
  • Still not sure what you try to accomplish. I added an answer below what my suspicion is you might want. Commented Jan 24, 2017 at 14:00
  • I think my point is that the background color is determined based on the item, which is dynamically displayed within ngFor. In other words, in the "item.name+'_css'", item.name is not the defined in component directly. It is under ngFor. Commented Jan 24, 2017 at 14:08
  • I think I got it. I updated my answer. You need some helper on the component because this is not allowed in the template AFAIK. You can try this instead of self in the view and ignore the getter. Commented Jan 24, 2017 at 14:17
  • You are aware that a <tr> can't contain a <b> element? only an <td> Commented Jan 24, 2017 at 14:59

3 Answers 3

Reset to default
1 
[style.background-color]="self[item.name +'_css']" 
get self() { return this; }

Plunker example

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

9 Comments

It does not work against my expectation. I do not understand well also.
It just shows one color (default color of label), does not show any error.
What do you get when you add <pre>{{self[item.name +'_css']}}</pre>
Value is corrected set like #f89406, if then, what could be the problem? It might be other problem :)
<span class = "label" [style.background-color]="self[item.name + '_css']"> .label { border-radius: 7px; text-shadow: none; font-size: 13px; font-weight: normal; padding: 3px 5px 3px; background-color: #abbac3!important } The reason I add [style.background-color] is to overwrite the background-color over defaul label's background color.
|
0

I don't understand purpose of using _css but you could do following,

[style.backgroundColor]="property1"

OR

[style.background-color]="property1"
Improve this answer

Comments

0

considering that you are trying to add css class to element otherwise @micronyks is providing exact code.

[ngClass]="{'my-class_css': isClassVisible }"
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.