backgroundColor Property not receiving values from Repeater items


Hi, guys. Here is the question at hand. I have a repeater that has as items an object containing colors in hex. I am trying to set the elements to the backgroundColor property of the itemTemplate, which is a Button like so:

<Repeater items="{{colorHex}}">                                                                                                
       <WrapLayout orientation="horizontal"/>                                                                                                             
      <Button text='{{ $value }}' backgroundColor='{{ $value }}' textTransform='lowercase'/>                                                             

What is really weird is the fact that though the backgroundColor property doesn’t apply the received hex, the text property does.

This is on Android which has the default background color for buttons being grey. One thing I noticed is that if I don’t set the backgroundColor property, the background is grey. But if I do set the property as shown in the code, it applies the color white to the background, instead of the color from the items.

Please help!! :slightly_smiling_face:


What is the value of colorHex?
Were you able to reproduce the same with Playground?


It is an observable array containing color hex code like this: #ff2233, #ee2255, #7722ff.

No. I have not tried it on playground, but I have tried it on both android and iOs, the results are the same. Btw, I use two laptops, one for developing android, which in running Ubuntu, and a MacBook for iOs. The MacBook is vey old, that’s why I have to use two laptops.:slightly_smiling_face:

Setting the $value to the text property works fine, but setting it to the backgroundColor doesn’t.


That sounds like a issue, you might want to report it on the Github repo.


Ok, Thank you very much for your time.


@rickdps Drop the # from your hex values in ObservableArray. Instead concatenate it in the xml, then it will work. I don’t know why, it’s probably a bug like @manojdcoder said.


Alright, Sam. thank you. Is it possible to use the built in javascript method “substr()” in the xml file?
For example:

backgroundColor='{{  $value.substr(0) }}'

I have tried it this way, but it didn`t work. Maybe it will some other way. Just wondering…


So you still have to pass backgroundColor a properly formatted HEX value. It’s just that for some reason (probably a bug), you can’t pass it directly from your bindingContext.

That’s why in the Playground Example I store the hex value without the # in the bindingContext and then prepend it in the xml like so;

backgroundColor="{{ '#' + $value }}"