0

I have a simple timer,onclick 'start Timer' button, timer will start and on click of 'pause' button it will pause.Till now it is working fine. Now I need to convert timer into hh:mm:ss format. like when it crossed 60, a minute will add left side,again when minute will cross 60,an hour will be added.I am not getting the concept how to do, can anyone please help me.Here is the code below and demo https://stackblitz.com/edit/angular-8wlwkj?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds</p>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  timeLeft: number = 0;
  interval;

  startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft++;
      } else {
        this.timeLeft = 1;
      }
    },100)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }
}
carreankush
  • 621
  • 2
  • 9
  • 32
  • And set the timeout to 1000 – mplungjan Feb 19 '20 at 18:24
  • Here the solution in in javascript and its different from my angular code. I have used the angular solution {{timeLeft | date: 'HH:mm:ss'}} as a pipe ,but its showing only 05:30:05 as output and start buttons is also not working – carreankush Feb 19 '20 at 18:34
  • @carreankush, for me the solution is use datepipe, as some close the question redirect to a JavaScript solution, see this simple stackblitz https://stackblitz.com/edit/angular-y3t8ug?file=src%2Fapp%2Fapp.component.ts. there two models the countdown and normal, I hope help you – Eliseo Feb 19 '20 at 19:48

0 Answers0