AngularJS - inline css style rendering

Question

Is it possible / and how / to write inline css style using angular variables?

<div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div>

This is my output

"NetworkError: 404 Not Found - http://test/eventInfo.eventHeaderImg"

So I see it didn't render this value.

I know it's possible to change this in controller, but is it doable with my approach?

Doesn't your eventInfo.eventHeaderImg variable in current $scope hold 'eventInfo.eventHeaderImg' value? — ngasull
– ngasull, Commented Apr 25, 2014 at 9:34
yes, when I print {{eventInfo.eventHeaderImg}} in html I get correct value. — Djomla
– Djomla, Commented Apr 25, 2014 at 9:45
@Djomla: In the fiddle provided above, I use {{eventInfo.eventHeaderImg}} in the style attribute as an argument to url (the exact same thing you do in your question). And it works fine. I think there was a bug with the style attribute in earlier versions of Angular. What version are you using ? — gkalpak
– gkalpak, Commented Apr 25, 2014 at 10:17

Ilan Frumer · Accepted Answer · 2014-04-25 09:39:43Z

20

You should use ngStyle:

an example: http://plnkr.co/edit/qT8skZzTwXjrh3Ye5mr9?p=preview

<div ng-style="{ background: 'transparent url({{ eventInfo.eventHeaderImg }}) top center no-repeat' }"></div>

answered Apr 25, 2014 at 9:39

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

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

5 Comments

Djomla Over a year ago

Hmm Im not sure why it's not working in my case. I have correct value in variable, but it's no rendering.

Djomla Over a year ago

ng-style="{background: transparent 'url({{eventInfo.eventHeaderImg}})' top center no-repeat;}" I got this error "Error: [$parse:syntax] Syntax Error: Token ''url(/8330.png?547933175)'' is unexpected, expecting [}] at column 27 of the expression"

Ilan Frumer Over a year ago

try this: ng-style="{background: 'transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat'}" the whole expression should be inside single quotes.

Djomla Over a year ago

Still same.. Im getting something like this stackoverflow.com/questions/23272145/…

gkalpak Over a year ago

There is not reason to use ngStyle. See my comment under the question. If you are using interpolation ({{}}) it should be working with style. Unless you use an older version of Angular.

Backer · Accepted Answer · 2015-11-05 14:51:27Z

5

This worked for my:

<div ng-style="{ 'background': 'transparent url(' + eventInfo.eventHeaderImg + ') top center no-repeat' }"></div>

answered Nov 5, 2015 at 14:51

Backer

1,1141 gold badge21 silver badges33 bronze badges

Comments

ngasull · Accepted Answer · 2014-04-25 10:01:46Z

0

You're "writing" a wrong url in your style, that's why you've got a 404 (not found) error.

According to this plunker, if you're $scope is well set up, you print the right data in style attribute.

Note that your eventInfo scope variable has to be a map/object.

answered Apr 25, 2014 at 10:01

ngasull

4,2161 gold badge24 silver badges36 bronze badges

Comments

Javi Muñoz Tous · Accepted Answer · 2014-04-25 09:31:23Z

-4

You don't need to use double curl brackets there.

answered Apr 25, 2014 at 9:31

Javi Muñoz Tous

881 silver badge9 bronze badges

1 Comment

Javi Muñoz Tous Over a year ago

Actually if you don't like to use ng-class and without the curly brackets you could use the approach explained here stackoverflow.com/questions/18248437/…

Collectives™ on Stack Overflow

AngularJS - inline css style rendering

4 Answers 4

You should use ngStyle:

5 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

You should use ngStyle:

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related