How to dynamically change image background with Angular 6 multiple times

Question

I have a stepper form (where you fill some fields, click next some other fields appears but its the same component) where I'd like a different background for each step. That means every time the user click a button, the background image has to change.

In order to try to achieve this I thought about using @HostingBinding like so:

@HostBinding('style.background-image')
bg_image = 'url(image_1.png)';

Then I'd a method that would be triggered every time the user clicks a button like so:

changeBg(img): void {
    bg_image = 'url(img.png)';
}

The above is pseudo-code, as I have some other logic wrapped around the whole thing, however the point that is that once the method is called, the background-image should update. On the html I have:

<div class="page-layout simple fullwidth"
 [ngStyle]="{ 'background': bg_image }">

And that works to a degree. I set an initial image, and once the method is triggered for the first time, the bg images gets updated. The problem is that on the second time onwards that the method is called, the background-image property seems to add the new image, instead of replacing it. So the more I trigger the method, the more images are added/stacked to the background-image (I can see all images as they're patterns to be repeated).

To resolve the problem I tried to clear the property first like so:

changeBg(img): void {
    bg_image = '';
    bg_image = 'url(img)';
}

Which doesn't work. Funny enough, if I do:

changeBg(img): void {
    bg_image = '';
}

The background-image disappears. Any suggestions on how to resolve this?

No, I have not tried that. Could you expand a little on how I try that? — WagnerMatosUK, Nov 29 '19 at 07:15
you look at this question https://stackoverflow.com/questions/45236671/why-do-i-need-to-call-detectchanges-with-the-default-change-detection-strategy — nab, Nov 29 '19 at 18:50
@ChikaLiO I've looked up the docs and got it working as I wanted. Would you like to add a reply so I can accept it? — WagnerMatosUK, Dec 03 '19 at 20:11

score 0 · Answer 1 · answered Nov 28 '19 at 17:25

if you would use the image like as bg_image = 'https://picsum.photos/200/300' . You need to do in template

[ngStyle]="{ 'background': 'url(' + bg_image + ')' }"

if you would use the image like as

changeBg(img): void {
    bg_image = `url(${img})`;
}

You need to do in template [ngStyle]="{ 'background': bg_image }"

score 0 · Accepted Answer · answered Dec 03 '19 at 21:05

0

try ChangeDetectorRef

ChangeDetectorRef.detectChanges()

answered Dec 03 '19 at 21:05

nab

568
8
20

How to dynamically change image background with Angular 6 multiple times

2 Answers2