how can i convert sec into hh:mm:ss format in angular2

Question

i have tried this

Time Left={{counter}}

but it show me just in second format. i want in hh:mm:ss format. i want to implement his functionality in quiz timer where timer is decreased. in my .ts file i take var counter and decrement using .map method using angular OBSERVABLE method.

i want to decrement the timer to end up the quiz. For example:1:20:60 to 0:0:0. When the timer is over i want to submit the quiz.

starttimer(){

this.countDown = Observable.timer(0,1000)
.take(this.counter)
.map( x=> --this.counter)
.subscribe(x=>this.timer(x))

}

Answer 1

I implemented this code by my own

var callDuration = this.elementRef.nativeElement.querySelector('#time');
this.startTimer(callDuration);

startTimer(display){
var timer = 3600;
var minutes;
var seconds;
var hours;
this.display1=display;

  this.sub = Observable.interval(1000).subscribe(x => {
  hours = Math.floor(timer / 3600)
  minutes = Math.floor((timer % 3600)/60);
  seconds = Math.floor(timer % 60);

  hours = minutes < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  seconds = seconds < 10 ? "0" + seconds : seconds;

  display.textContent = hours + ":" + minutes + ":" + seconds;

  --timer;
  if (timer < -1) {
    this.sub.unsubscribe();
    display.textContent ="00:00:00";
    window.alert("Times Up, Quiz Submitted");

Answer 2

Hello here one suggestion.

import {Component, Directive, Output, OnInit, EventEmitter, Input, SimpleChange} from '@angular/core'
    import {Observable} from 'rxjs/Observable';
    import {Observer} from 'rxjs/Observer';
    import 'rxjs/Rx';


    @Component({
      selector: 'my-app',
      template: `
      {{ timeMask(tick) }}
      `
    })
    export class App implements OnInit {

      private tick: number = 72;
      private myobs = Observable.timer(1000,1000).map( m =>  m );

      ngOnInit(){
        this.myobs.subscribe( x => if( this.tick > 0){ this.tick-- } );
      }

      timeMask(value: number): string {
           const minutes: number = Math.floor(value / 60);
           return minutes + ':' + (value - minutes * 60);
       }

    }

also link for the plunker

Answer 3

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/takeWhile';

@Component({
  selector: 'app-root',
  template: `
  {{miliseconds |date:'HH:mm:ss':'+0000'}} 
  `
})
export class AppComponent implements OnInit {
  miliseconds:number
  alive:boolean=true;
  ngOnInit()
  {
    this.miliseconds=5000;
    Observable.interval(1000)
        .takeWhile(()=>this.alive)
        .subscribe(x => {
             this.miliseconds-=1000;
             if (this.miliseconds<0)
             {
               this.miliseconds=0;
               this.alive=false;
               window.alert("Times Up, Quiz Submitted");
             }
         })
  }
}

Answer 4

Use a Pipe.

Anywhere in your project :

import { Injectable, Pipe, PipeTransform } from '@angular/core';
/*
 * Transform seconds (number) yo hh:mm:ss string
*/

@Pipe({name: 'secondsToHhmmss'})
export class SecondsToHhmmss implements PipeTransform {
  transform(totalSeconds: number): string {
   
    const hours = Math.floor(totalSeconds / 3600)+"h";
  const minutes = Math.floor((totalSeconds % 3600) / 60) +"m";
  const seconds = (totalSeconds % 60) +"s";
  let result = `${minutes
    .toString()
    .padStart(1, '0')}:${seconds.toString().padStart(2, '0')}`;
  if (!!hours) {
    result = `${hours.toString()}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }
  return result;
  }
}

Next, add this to the declarations and exports of the respective app.module

In your html

<p> Time Left={{counter}} | secondsToHhmmss </p>