title: Angular 4 refresh <img src={{ ... }} > when the value changes
body: <p>I am using Angular 4 and I have a component where I want to change my user current photo.. so the html code that displays the current user photo is this.. </p>
  
  <pre><code>&lt;div class="profilphoto"&gt;
          &lt;img src= {{currentphoto}}&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>currentphoto</em></strong> contains the current user photo url and I get it from firebase..
  After that I display a Gallery of photos so the user can select one and change his profil photo using a form.. the submit code is the following and works fine</p>
  
  <pre><code>    onSubmit = function(form) {
      this.photoUrl = form.photoUrl;
      firebase.database().ref("users/"+this.authService.cusername+"/photo").update({
        url: form.photoUrl
      }).then(()=&gt;{
        this.currentphoto = this.authService.photourl;
        console.log("currentphoto:"+this.currentphoto);
      }
      );
    }
  </code></pre>
  
  <p>Everything works fine except that despite the <strong><em>currentphoto</em></strong> value has changed and database url upadated the html still displays the previous user's image and its annoying(if I refresh the page it shows the new profil image).. Is there any way I can make </p>
  
  <pre><code>&lt;div class="profilphoto"&gt;
          &lt;img src= {{currentphoto}}&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>detect when <strong>currentphoto</strong> changes value and Display the image with the new src value??</p>