Creating a custom Angular pipe to convert milliseconds to a formatted hh:mm:ss in Angular

Struggling to develop an Angular pipe that accurately converts milliseconds to hh:mm:ss format. Despite researching several articles, none of the solutions seem to work.

Here is a snippet of the current pipe.ts implementation:

transform(value) 
  {
    let formatted;
  
    let duration = moment.duration(value, "milliseconds");

    if (value < 59999){
      formatted = `00:00:${duration.format("hh:mm:ss")}`;
      
    }
    else if (value < 3599999){
      formatted = `00:${duration.format("hh:mm:ss")}`;
    }
    else {
      formatted = duration.format("hh:mm:ss");
    }
    return formatted;

However, there seems to be an error in the code. For example, when passing 23677258 milliseconds, the output obtained is 3:44:20 instead of the expected result.

Answer №1

If you're utilizing moment.js, all you have to do is pass the value into moment as an argument and then define the desired output format.

convertTime (inputValue : number | string) : string {
  return moment(inputValue).format('HH:mm:ss');
}

Answer №2

Give this a try, it's just for testing purposes:

this.myTime = new Date(23677258);
    const zoneoffset = new Date().getTimezoneOffset()
    this.myTime = new Date(this.myTime.setHours(this.myTime.getUTCHours() - zoneoffset)); 

The result I got is https://i.sstatic.net/9gTJQ.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A Vue object with dynamic reactivity that holds an array of objects

I've experimented with various approaches, but so far I've only managed to get this code working: // This works <script setup lang="ts"> import { reactive } from 'vue' import { IPixabayItem } from '../interfaces/IPi ...

Avoid obtaining cookies within the TRPC environment

Recently, I've been setting up TRPC with Next.js and attempting to implement server-side rendering where I fetch user data before the page loads using the trpc.useQuery hook. However, I'm facing an issue where I cannot access the JWT token cookie ...

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

Issues encountered while attempting to use 'npm install' on Angular, leading to

Having trouble with npm i in my project. It's not working for me, but others can install it smoothly. I've checked all the node and angular versions, but I can't figure out what's missing. Could it be my laptop's compatibility? Ple ...

A guide on implementing RxJS Observables to target a specific DIV element

Currently, I am working with Angular 2. At the moment, I have been using this method to select a specific DIV element: <div #aaa> </div> @ViewChild('aaa') private aaa: ElementRef; ngAfterViewInit() { let item = this.aaa.nativeEle ...

What could cause my arguments to "not align with any signature" of console.log?

Here is a basic class example: export class Logger { constructor(private name: string) {} debug(...args: any[]) { console.debug(...args) } log(...args: any[]) { console.log(...args) } } Despite being able to pass anything to console.l ...

After reinstallation, Angular CLI is still not functioning properly

I recently tried to upgrade my Angular CLI by uninstalling it and installing the new version. However, I encountered an issue where I am unable to run ng commands anymore due to an error message that keeps appearing: ng : File C:\Users\Sirius&bso ...

The Application Insights Javascript trackException function is giving an error message that states: "Method Failed: 'Unknown'"

I've been testing out AppInsights and implementing the code below: (Encountering a 500 error on fetch) private callMethod(): void { this._callMethodInternal(); } private async _callMethodInternal(): Promise<void> { try { await fetch("h ...

What is the best way to locate this particular element on the webpage?

After using the right-click and selecting inspect element, I located the code of the desired element on the webpage: <input type="text" ng-if="!editing" ng-model="item.Price" ng-click="inputFocus()" ts="" required="" placeholder="قیمت :" class="ng- ...

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

I have successfully implemented code using Http and now I am looking to upgrade it to use the latest HttpClient. So far, I have taken the following steps: In App.module.ts: imported { HttpClientModule } from "@angular/common/http"; Added HttpClientModul ...

How to temporarily modify/add CSS class in Angular 2

In my Angular 2 application, there is a label that displays the current amount of points for the user. Whenever the number of points changes, I want to briefly change the class of the label to create an animation effect that notifies the user of the chang ...

The Eslint tool encountered an issue: Parsing error - it seems that the function ts.createWatchCompilerHost is

What could be causing this error message to appear? Here is my current configuration: "parser": "@typescript-eslint/parser", "parserOptions": { "project": "tsconfig.json", "tsconfigRootDir& ...

TypeScript multi-dimensional array type declaration

I currently have an array that looks like this: handlers: string[][] For example, it contains: [["click", "inc"], ["mousedown", "dec"]] Now, I want to restructure it to look like this: [[{ handler: "click" ...

Utilizing the polymer paper-dialog component in an Angular 2 TypeScript application

I have imported the paper-dialog from bower, but I am facing an issue with showing the dialog using the open() method. app.component.html <paper-icon-button icon="social:person-outline" data-dialog="dialog" id="sing_in_dialog" (click)="clickHandler()" ...

What is the method for removing an item from my TypeScript to-do list?

I am fairly new to TypeScript and I'm currently facing some challenges in deleting an item from my to-do list. I could use some guidance on how to go about implementing this feature. I have created a deleteHandler function that needs to be integrated ...

How to make an input blur in Angular 2 when a button is clicked?

Is there a way to blur an input field by pressing the return button on a mobile native keyboard? Here is an example: <input type="text" #search> this.search.blur() //-- unfocus and hide keyboard ...

Transmit data from a child component to a Vue JS page through props, and trigger the @blur/@focus function to access the prop from the parent component

Seeking guidance on working with props in Vue JS. As a newcomer to Vue, I hope that my question is clear. I've included my code snippet below, but it isn't functioning correctly due to missing Vue files. In my attempt to use a prop created in t ...

Please place the accurate image inside the designated box based on the corresponding ID number

I am currently working on a function that retrieves image data from a database and displays it in HTML using *ngFor directive. In order to display the correct image, I need to fetch the ID associated with the image data and use it to retrieve the correspo ...

Determining the inner type of a generic type in Typescript

Is there a way to retrieve the inner type of a generic type in Typescript, specifically T of myType<T>? Take this example: export class MyClass { myMethod(): Observable<{ prop1: string, ... }> { .... } } type myClassReturn = ReturnTy ...

Is there a way for me to retrieve the classes that have been applied to an Angular 2 component through HTML?

I have created a custom component that I want to use in the following way: <vx-alert class="au-upper-center"> <p>Upper Center</p> </vx-alert> Inside the vx-alert component, I need to access and manipulate the classes applied i ...