title: Angular7 - Problem in refreshing a seekbar (input range) using a function
body: <p>I'm writing a music player using angular7, and this is the html code of my component:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div class="track-controller"&gt;
    &lt;small&gt;{{musicPlayerService.getCurrentTime()}}&lt;/small&gt;
      &lt;div class="progress-wrap"&gt;
        &lt;input type="range" class="progress" [value]="musicPlayerService.getProgress()" min="0" max="100" step="1"
                    #duration (input)="musicPlayerService.setProgress(toNumber(duration.value)) "&gt;
        &lt;div class="progress-foreground" [style.width.%] ="musicPlayerService.getProgress()"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;small&gt;{{musicPlayerService.getTrackDuration()}}&lt;/small&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see I call 4 functions from my music player service, but in particular these 2 functions should be called continuously to update my seekbar:</p>
  
  <p><code>getCurrentTime():</code> this is used to get the track current time in seconds</p>
  
  <p><code>getProgress():</code> this is used to get the current track %, to update the seekbar</p>
  
  <p>The problem is that as far a I can see, these 2 functions are called only once (when my musicPlayerService start playing the track), and even more strange: everytime I click randomly on the page with my mouse or I move the mouse pointer on a link.</p>
  
  <p>Thanks for the help</p>