Delay in image update using angular bind

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.


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


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?

Hand to tell from just this. can you share a more complete example?

While I was minimizing the code to make it easier to understand the problem I believe I have found the source of this problem. There is a considerably large function that is used by the component mentioned, I believe it was one of the first that I did, that function ends up mixing some features of different versions of ECMAS. For now I have no way to make such a big modification to the app to prove this theory, so I believe we can end here for now. Thank you for your help!