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 ?

Answer 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)
 }