title: Javascript Countdown Timer with Milliseconds in Angular 4
body: <p>I'm trying to create a countdown timer that will show accurate milliseconds once the timer reaches below 1 minutes (59 seconds or less) in Angular 4 for a sporting event clock, but I'm having trouble with the setInterval function. Here's the code:</p>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>timer: number = 100;
  intervalId: number = -1;
  
  start() {
    this.intervalId = setInterval(() =&gt; {
      this.timeIt()
    }, 1000);   
  
    if (this.timer &lt;= 0) {
      this.stop();
    }
  
  }
  
  stop() {
     clearInterval(this.intervalId);
     this.intervalId = -1;
  }
  
  startStop() {
    if(this.intervalId == -1) {
      this.start();
    }  else {
      this.stop();
    }
  }
  
  timeIt() {
   this.timer--;
   if (this.timer == 0) {
     clearInterval(this.intervalId);
   }
  }
  
  convertSeconds(s) {
    var minutes = Math.floor(s / 60);
    var seconds = (s % 60)
    var milliseconds = s;
  
    if (this.timer &gt;= 60)
      return p5.prototype.nf(minutes, 1) + ':' + p5.prototype.nf(seconds, 2);
    else if (this.timer &lt; 10)
      return p5.prototype.nf(seconds, 1) + '.';
    else 
      return p5.prototype.nf(seconds, 2) + '.';
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;h1&gt;{{ convertSeconds(timer) }}&lt;/h1&gt;
  &lt;button (click)="startStop()"&gt;Start/Stop&lt;/button&gt;
  </code></pre>
  
  <p>I'm having trouble with the setInterval function, I know I can't count milliseconds if the parameter I'm using is 1000, but when I try using 1 or 10 as the parameter the code gets all buggy. As you can see the in the HTML code I'm calling the convertSeconds() function which renders the time on the page. Been stuck on this problem for a while now, please someone help!</p>