Delay in image update using angular bind

@leonardofmed wrote:

I have a button with an image inside, the image source is linked to a variable through Angular binding. This variable is changed through an Observable, shared between the page and a component through a service. My problem is that when this variable is changed, there is an evident delay for the image update.

I already tried to add these changes into an NgZone, as suggested here, but the situation was the same.

page.html

<ion-button (click)="randomFunction()">
    <img [src]="'assets/images/' + buttonImage + '.png'">
</ion-button>

page.ts

this.buttonImageSubscription = this.randomService.buttonImageObservable.subscribe(status => {
	if (status === true) {
		this.buttonImage = 'image1';
	} else {
		this.buttonImage = 'image2';
	}
});

If I interact with the page, the image is updated, otherwise the image will remain static (previous value) until something in the page is changed or received from non related functions. From the log I can see that the variable value is updated, but the image in the button not.

What could be causing this problem?

Posts: 1

Participants: 1

Read full topic