Detect Change in Angular binding with same name but different value?

Question

I am working with profile image change api. Each time I change image I get changed image back from server but with the same url (say test.jpeg).

  url: string; 

 <img [src]="url" />

 url : test.jpeg   // url returned from server on image change first time
 url : test.jpeg   // url returned from server on image change second time
 url : test.jpeg   // url returned from server on image change third time

Though server returns different image angular is not able to detect as there is no change in url. How to solve this ?

you need to assign new value to url when the API response is arrived. — Naseer, Dec 11 '19 at 11:22
The old value(url) and New value(url) are same from API Response. Only content of image inside server changes — Asridh Kumar, Dec 11 '19 at 11:23
this might help you https://stackoverflow.com/questions/35936535/angular-2-ngoninit-not-called/35937062#35937062 — Naseer, Dec 11 '19 at 11:31

score 1 · Answer 1 · answered Dec 11 '19 at 11:26

1

easy way to do that is adding some fake query params.

 get src() {
   return this._imageSrc + '?q=' + this.hash;
 }

 pictureWasUpdated() {
  this.hash = Math.random().toString(16)
 }

answered Dec 11 '19 at 11:26

Andrei

10,117
13
21

Detect Change in Angular binding with same name but different value?

1 Answers1