CODEWITHSUNDEEP
angular
SEL_M
SEL_M

Reputation: 11

Timespan in typescript

I'm building a web app using Angular + Typescript. And I have ASP.NET Core Web API, I'm trying to show in front end time in this format 10:10:10 but it shows me in this format

{
 "Hours":16,
 "Minutes":8,
 "Seconds":45,
 "Milliseconds":0,
 "Ticks":581250000000,
 "Days":0,
 "TotalDays":0.6727430555555556,
 "TotalHours":16.145833333333332,
 "TotalMilliseconds":58125000,
 "TotalMinutes":968.75,
 "TotalSeconds":58125
}

How do I display timespan in typescript?

My html Code

         <ng-container matColumnDef="startday">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
          {{'::Startday' | abpLocalization}}
        </th>
        <pre mat-cell *matCellDef="let element">
          {{ element.startday| json}}
        </pre>
      </ng-container>

Upvotes: 0

Views: 4959

Answers (1)

shutsman
shutsman

Reputation: 2510

You simply can use hours, mins, secs from object and concatenate it in one string

Also I added method getString() that convert one number to format 01, if 12 it will be the same 12

instead of 1:1:1 we got 01:01:01

const time = {
 "Hours":16,
 "Minutes":8,
 "Seconds":45,
 "Milliseconds":0,
 "Ticks":581250000000,
 "Days":0,
 "TotalDays":0.6727430555555556,
 "TotalHours":16.145833333333332,
 "TotalMilliseconds":58125000,
 "TotalMinutes":968.75,
 "TotalSeconds":58125
};

function getString(number) {
  return number.toString().padStart(2, "0") // converts 2 to 02, 7 to 07
}

const formattedTime = `${getString(time.Hours)}:${getString(time.Minutes)}:${getString(time.Seconds)}`;

console.log(formattedTime)

Upvotes: 1

Related Questions