Converting time from 00:00:01 to a format of 8 minutes and 49 seconds in Angular

Is there a way to transform a time value from 00:00:01 (not a date object) into a format showing 8 minutes and 49 seconds?

Even after consulting the Angular 'date pipe' documentation, I couldn't find a solution to this issue.

Answer №1

Utilizing Angular date pipes is the recommended approach... It should suit your needs within your HTML:

Additional Information: Based on your feedback, it seems that you are dealing with a time string, which means you need to first convert that time string into a date... After that, the Angular Date pipe will take care of the rest;

relevant TS:

  sampleTime = '08:04:01';
  sampleDate;
  constructor() {

    this.sampleFunction()
  }

  sampleFunction() {
    var origStr = this.sampleTime;
    var n = origStr.search(":");
    var hrPart = origStr.substring(0, n);

    var str = origStr.substring(n + 1, origStr.length);
    var n = str.search(":");
    var minPart = str.substring(0, 2);

    var str = str.substring(n + 1, str.length);
    var n = str.search(":");
    var secPart = str.substring(0, 2);
    console.log(hrPart, ':', minPart, ':', secPart);

    this.sampleDate = new Date();
    this.sampleDate.setHours(hrPart, minPart, secPart);

  }

relevant HTML:

{{myDateVariable | date:"h 'hours' mm 'minutes' ss 'seconds'" }}

view the updated functional stackblitz here

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

Using PHP to display a message box and redirecting to a different webpage

Currently, I am working on developing a login page using PHP. When the user enters an incorrect username/password combination, I display a JavaScript alert box to notify them. However, after clicking the "OK" button on the alert box, I want to redirect t ...

Is there a way to obtain the tasklist result of exec() from child_process and convert it to JSON format?

When I use the tasklist command with child_process, the stdout returns processes in Unicode string format that is not easily queryable. Here is the code snippet: var exec = require('child_process').exec; ... exec('tasklist', function( ...

Why is the value in my React Redux state not updating as expected?

I recently started learning react js as a beginner. To practice, I created a crud app and integrated firebase for authentication. However, I'm facing an issue where I'm not able to retrieve the updated value. Index.jsx At line 11, I'm stru ...

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

How to implement a Typescript interface without necessarily implementing the parent interfaces

Within my current project, I have defined the following interfaces: interface foo { fooProperty: number; fooFunction(): void; } interface bar extends foo { barProperty: string; barFunction(): void; } Now, I am interested in creating a class like ...

Error message in JavaScript saying "The response string is undefined

I am working on a program built in angularjs. Currently, I receive JSON data from the server when online, but I am now developing an offline mode for the application. Despite trying to tackle the issue, I am unable to identify why I cannot resolve it. In ...

Restrict the character count in the input field according to its width

Is there a way to restrict the number of characters in an input field based on its width? I have a dynamic input field with varying widths and I would like users to be able to type without their text extending outside of the input boundary. Using maxLeng ...

The MUI date picker does not display dates earlier than 1900

I am in need of a datepicker that allows users to select dates from the 1850s, however, the mui datepicker only starts from the 1900s. To demonstrate this issue, I have provided a sample code in this codesandbox I am utilizing mui in the remainder of my ...

Online application for saving a vast quantity of information on the user's device

Is there a way for a web application to store an extensive amount of data client-side, allowing for millions of records to be accessed offline by users exclusively on Chrome? I initially considered indexedDb, but I discovered it becomes almost unusable wi ...

Expanding the size of a JavaScript array by adding fields

I have extended the JS array prototype by adding a "max" field. However, I am encountering difficulties in displaying this addition when stringifying the array. Despite attempting to modify the toJSON function, my efforts have been unsuccessful. Array.pro ...

Why is the Get request for fetching data not returning multiple parameters, but only returning a single one in Vuex?

I am trying to fetch and visualize a list of data with a GET request while passing two parameters. However, I am encountering an error 400 when passing both parameters, but it works fine when passing just one. Link to code This is the non-working code: a ...

Navigate to a different page using Angular with a simple click

How can I implement a redirect from clicking on the "Firms" word to another component page in Angular? I have tried using routerLink="/", [routerLink]="['/']". I have imported Routes in the app.module. I have also attempted this approach: import ...

What is the best way to read a local text file and store its contents in a string variable within a

Within my ReactNative project, I am seeking to retrieve the content of static text files and store it in a string variable. Here is an example of how I would like to achieve this: var content = loadPlainTextFile("resources/tags.txt"); var tags = content.s ...

Using more than one variable for filtering in Vue.js

I've been busy working on implementing table filtering in Vue.js. So far, I have successfully filtered the table by name and date. However, I'm now facing a challenge with adding another filter along with them. If you want to check out my curren ...

Utilizing HTML templates efficiently without the need for a view engine

For a new application, we are implementing multiple servers for handling different functions - one server for delivering HTML files, another as a proxy to handle HTTPS requests, and a Java backend with a database. The view server should be simple, with an ...

Having issues with the latest version of Fabric JS code running properly

Hello, I stumbled upon this JS fiddle (http://jsfiddle.net/efmbrm4v/2/) and I really need something similar to function properly. The fiddle uses an older version of fabric js (1.4.0) and I'm having trouble getting it to work with the newer versions ( ...

Is there a way to organize this array based on the group score?

0: {id: 2575, groepName: "ezeez-1", groupScore: 50, Players: Array(0)} 1: {id: 2574, groepName: "ezeez-2", groupScore: 25, Players: Array(0)} 2: {id: 2576, groepName: "ezeez-3", groupScore: 10, Players: Array(0)} 3: {id: 2577, ...

Is there a way to retrieve the dynamically generated text content of an element using document.write?

I am encountering an issue similar to the following: <div id="myDiv"><script>document.write('SOMETHING');</script></div> My goal is to extract the content inside the script tag, which in this case is "SOMETHING" ...

A step-by-step guide on extracting nested ASP.NET DataGrid values with JavaScript

Looking to retrieve data from a nested data grid on an aspx page using JavaScript. Check out the following code snippet: <tr> <td colspan="2" align="center"> <asp:DataGrid ID="sampleData" AutoGenerateColumns="false" runat="serv ...

How to pull data from an HTTP source without relying on promises

Here is a simplified version of the service code I am using: Load(Channel: any) { // let URL = Globals.AppSiteRoot + Channel.URL return this.LoadData(URL) } Load_Default() { let URL = Globals.AppSiteRoot + "di ...