Ilya Ilin Ilya Ilin - 2 months ago 11
CSS Question

Ng-style not working for background

I need to set background of element from configuration object through

ng-style
, but I can't do that for some unknown reason, it's really weird for me and I really can't find the reason why.

The element I'm trying to configure:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>


pblc
stands for controller here, I'm using
controllerAs
option

The configuration object:

this.progressLOptions = {
color: '#F0F3F4',
width: '200px',
height: '20px',
};


The weirdest thing is that width and height are setted, in rendered html I see this:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>


I really have no idea how can ng-style work like so. Is there some issue with background I wasn't able to find?

Answer

Updated answer: You have a typo - plbc.options.color instead of pblc.options.color

The most likely reason is that plbc.options.color is undefined, empty, not in scope or misconfigured. This is in case there's no syntax error of course.

Try outputting it as an expression in the template - {{plbc.options.color}} and check it.