0

I have a component with this styling: [ngStyle]="{background: 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center'}" The components have on the server and the first one is added as background image. How should I add a default background image for those components which don't have any image associated?

UPDATE: This worked for me:

[ngStyle]="{'background': 'url(http://somedomain/api/'+event.EventID+'/otherUrlItems/image) no-repeat center center, url(https://placeimg.com/640/480/any) no-repeat center center'}"
xyzz
  • 21
  • 1
  • 7
  • 1
    Possible duplicate of [Combine \[NgStyle\] With Condition (if..else)](https://stackoverflow.com/questions/37051496/combine-ngstyle-with-condition-if-else) – Brian Dec 19 '17 at 14:31
  • You're single quotes are misplaced. – Andy G Dec 19 '17 at 14:31
  • @Brian, this helped me: https://stackblitz.com/edit/angular-4kwerh. Thanks for Pierre Mallet. – xyzz Dec 20 '17 at 11:04

1 Answers1

0

If your application cant know if there is a background available for this event you can try multiple background images (set you default image in last)

see this post

An other possibility is to add a class to your DOM element and set a background image directly in the css. Then the style added by ngStyle will override the css.

But the side effect is that you will have 404 request in your client browser. The best option is IMO to host a default background in your back-end and serves it when no image is available

If your angular application know if an image is available, then check the post in the comment by Brian

Pierre Mallet
  • 7,053
  • 2
  • 19
  • 30