angular how to format integer to date format hh/mm/ss

Question

im subtracting two dates to get the time difference between them at typescript code. after im getting the time difference as integer i need to display it at the html code in the format hh/mm/ss. as example i subtract two dates and gets the result 8(int) how do i display it now at the correct format i want?

tried using angular date pipes but i got wrong time as the result, as example i subtracted two dates that the difference between them are 8 hours but the result i got on the html is : 2:00:00 AM, the format was right but wrong result

!!!edited!!! i upload https://stackblitz.com/edit/angular-urpale

angular html :

<div class="container">
  <div class="row">
    <div class="col mt-5 mb-5">
      <p><span class="main-text">New auction </span> <span class="custom-text-2">| 5 Live auction</span></p>
    </div>
  </div>
  <table class="table" *ngIf="isAuctionsLive; else noAuctionsLive">
    <thead>
      <tr>
        <th scope="col" class="blue-text">Auction #</th>
        <th scope="col" class="blue-text">From</th>
        <th scope="col" class="blue-text">To</th>
        <th scope="col" class="blue-text">Pickup</th>
        <th scope="col" class="blue-text">Chargeable weight</th>
        <th scope="col" class="blue-text">Lowest bid</th>
        <th scope="col" class="blue-text">Time left</th>
        <th scope="col" class="blue-text">Status</th>
        <th scope="col" class="blue-text">delete later</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let auction of liveAuctionData.liveAuctions; let i=index">
        <th scope="row">{{ i }}</th>
        <td>
          <p class="text-bold">{{ auction.OriginCompany }}</p>
          <p class="custom-text-4">{{ auction.OriginAddress }}</p>
        </td>
        <td>
          <p class="text-bold">{{ auction.DestinationCompany }}</p>
          <p class="custom-text-4">{{ auction.DestinationAddress }}</p>
        </td>
        <td class="input-text">{{ auction.PickupDate | date:'dd/MM/yy' }}</td>
        <td class="input-text">{{ auction.TotalWeight }} kg</td>
        <td class="input-text">!! lowest bid !!</td>
        <td class="input-text">{{ auction.timeDifference | date:'mediumTime' }}</td>
        <td *ngIf="auction.AuctionState == 2;">
          <p class="text-gray">In progress</p>
        </td>
        <td *ngIf="auction.AuctionState == 3;">
          <p class="text-gray">In progress</p>
        </td>
        <td *ngIf="auction.AuctionState == 4;">
          <p class="text-gray">Auction ended</p>
        </td>
        <td *ngIf="auction.AuctionState == 2;">
          <button disabled class="btn btn-primary live-auctions-btn">No Bids</button>
        </td>
        <td *ngIf="auction.AuctionState == 3;">
          <button class="btn btn-primary live-auctions-btn">View Bids</button>
        </td>
        <td *ngIf="auction.AuctionState == 4;">
          <button class="btn btn-primary live-auctions-btn">Book!</button>
        </td>
      </tr>
    </tbody>
  </table>
  <ng-template #noAuctionsLive>
    <div class="row">
      <div class="col">
        <p class="text-center custom-text-2">no live auctions at the moment</p>
      </div>
    </div>
  </ng-template>
</div>

typescript

import { Component, OnInit } from '@angular/core';
import { ClientLiveAuctionsService } from 'src/app/services/client-live-auctions/client-live-auctions.service';
import { LiveAuctions } from './../../../models/clientLiveAuctions/live-auctions';
import { AuctionsStates } from 'src/app/enums/auctions-states';
import * as moment from 'moment';

@Component({
  selector: 'app-live-auctions',
  templateUrl: './live-auctions.component.html',
  styleUrls: ['./live-auctions.component.css']
})
export class LiveAuctionsComponent implements OnInit {
  liveAuctionData: LiveAuctions = {
    liveAuctions: []
  }

  isAuctionsLive: boolean = false;
  isInProgress: boolean = false;
  date1;
  date2;
  hours;

  constructor(private _clientLiveAuctionsService: ClientLiveAuctionsService) { }

  ngOnInit() {
    this._clientLiveAuctionsService.getLiveAuctions()
      .subscribe((liveAuctionDataFromServer) => {
        this.liveAuctionData.liveAuctions = liveAuctionDataFromServer;
        for (var i = 0; i < this.liveAuctionData.liveAuctions.length; i++) {
          this.liveAuctionData.liveAuctions[i].timeDifference = Math.abs((new Date(this.liveAuctionData.liveAuctions[i].StartDate) as any) - (new Date(this.liveAuctionData.liveAuctions[i].BidEndDate) as any)) / 36e5;
        }
        console.log(this.liveAuctionData.liveAuctions);
        if (this.liveAuctionData.liveAuctions.length == 0) {
          this.isAuctionsLive = false;
        } else {
          this.isAuctionsLive = true;
        }


      })

  }

}

how to solve this issue?

Answer 1

You need to convert your calculated number to something like this

duration : {
  hours: number,
  minutes: number,
  seconds: number
};

then use this pipes to show it

{{ duration.hours | number:'2.0-0'}}/{{ duration.minutes | number:'2.0-0'}}/{{ duration.seconds | number:'2.0-0'}}

Your updated stackblitz