Set background-image with condition (if... else)



How do I set css background-image with condition?

if value exist, show this image. like this?

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

but it’s not working. Can anyone elaborate this? thanks.


Perhaps you are running into the DOM sanitizer mentioned in the angular rc2 changelog. If it’s possible to do so, the simplest and safest way to handle this would be to define your two background images in CSS as class selectors, and then do the dynamic bit by twiddling classes on the div.


Thanks for your response.

What if it is a dynamic image which is come from JSON object? Each element will have a different image.


Then you will probably have to futz around with the DOM sanitizer. See the changelog in my previous comment.