Specifying alternate background image using ngStyle - css

Question

I am trying to specify an alternate background image for a DIV like so:
<div [ngStyle]="{'background-image':'url(1.jpg), url(2.jpg)'}"></div>
Neither of the images are displaying (it works if I don't specify an alternate image).
Is it possible to specify multiple background images using ngStyle?

Answer 1

Working demo
Template file
<div [ngStyle]='styles'>
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
Ts file
export class AppComponent {
name = 'Angular';
img1 = 'https://www.w3schools.com/css/img_flwr.gif';
img2 = 'https://www.w3schools.com/css/paper.gif'
isSelected: boolean = true;
styles = {};
setCurrentStyles() {
this.styles = {
backgroundImage: this.isSelected ?
`url(${this.img1})`:`url(${this.img2})`
};
}
toogleImage() {
this.isSelected = !this.isSelected;
this.setCurrentStyles();
}
}

Answer 2

Try like this
template.html
<div class="image" [ngStyle]="{background: !isActive ? 'url(https://www.fonewalls.com/wp-content/uploads/Aqua-Solid-Color-Background-Wallpaper-for-Mobile-Phone.png)' : 'url(https://www.fonewalls.com/wp-content/uploads/Midnight-Blue-Solid-Color-Background-Wallpaper-for-Mobile-Phone.png)'}"></div>
cmponent.ts
isActive: boolean = true;

Answer 3

You can also keep your HTML clean with moving all the logic into the component.ts.
In the end you would have something like this:
<div class="image" [ngStyle]="{
'background-image': 'url(' + backgroundImageString + ')'
}"></div>
Then in your component:
private defineBackImage(someArg) {
if (stuff) {
this.backgroundImageString = url1;
} else {
this.backgroundImageString = url2;
}
}
You can trigger this function on init of according to specific events, also you can extend this logic to display much more than 2 backgrounds