Angular - NgStyle fall back image

Question

What I'm Using

• Angular

What I'm trying to do

• When an image hasn't been returned from the server, use a placeholder image

Issue

• I'm not sure on the syntax. Any help here would be fantastic!
• Could there be a '?' check inside my ngStyle Background Image?

<div class="image" [ngStyle]="{'background-image': 'url(' + (image.myImage | async)  + ')'}"></div>

Answer 1

<div *ngIf="img" 
   class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
 </div>
<div *ngIf="!img" 
   class="image" [ngStyle]="{'background-image':'url(http://via.placeholder.com/350x150)'}">
</div>

Answer 2

You syntax is correct but to achieve your desired behavior you do this:

<div *ngIf="image.myImage | async; let img; else loading" 
       class="image" [ngStyle]="{'background-image': 'url(' + img + ')'}">
</div>    

<ng-template #loading>
    <div class="image" [ngStyle]="{'background-image': 'url(/assets/placeholder.png)'}"></div>
</ng-template>

Demo