determine the discrepancy between two time periods

I am facing an issue while trying to calculate the time difference between two hours in my code snippet:

 changEndHour($event: any, i: number) {
    var arrayControl = this.generalForm.get('hours') as FormArray;
    let startHour = arrayControl.at(i).get('startHour').value,
    startMin = arrayControl.at(i).get('startMin').value,
    endMin = arrayControl.at(i).get('endMin').value,
      endHour = $event.split(":"), date1 = new Date(), date2 = new Date();


      date1.setHours(startHour, startMin).toString();
      let d1=date1.setHours(startHour, startMin).toString();
      date2.setHours(endHour, endMin).toString();
      let d2=date2.setHours(endHour, endMin).toString();
      let hours = (Math.abs(date1.getTime() - date2.getTime()) / 1000 / 60 / 60).toFixed(2);
      arrayControl.at(i).get('result').setValue(hours);
    }

After testing the code with inputs 13:00 and 12:10, I found that it is yielding a result of 0.83 which is incorrect. I need assistance in improving this piece of code. Can someone help me solve this issue?

Answer №1

Your coding is spot on and produces accurate results. The output represents the percentage of 60 minutes. By executing the following formula:

60 * 0.83 = 49.8

You will achieve the desired outcome in minutes.

To address your issue, consider implementing the following solution:

let result = str.split(".")
console.log("The time difference is " + str[0] + " hours, " + (60 * str[1]) + " minutes")

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

Ways to transfer a value between two different card elements

I have designed a component with three div cards side by side using bootstrap. The first card displays a list of products, and my intention is that when a product is clicked, the details should appear in the second card on the same page. However, this fun ...

Learn how to seamlessly integrate sigmajs into your Angular 7 project and uncover the power of the startForceAtlas2 package for dynamic network visualization

Is there a way to integrate Sigma.js into Angular 7 and utilize its features effectively? Additionally, I am interested in incorporating the startForceAtlas2 package. ...

Using Directives inside a Standalone Component in Angular: A Step-by-Step Guide

As I work on integrating a directive that is not standalone into a Standalone component, I encountered an error. The specific error message can be viewed here. Even after including the directive in the component's import array as shown here, the issu ...

Error message in TypeScript class extension: "TypeError: Object.setPrototypeOf expects an object or null, received undefined."

In my Ionic 3 application, I have the following code snippets: @Injectable() // I also tried without @Injectable and encountered the same error export class M_someClass { constructor () { } method1 () { console.log("method1 used") } } @Injectabl ...

401 error code for all CRUD operations in the .NET Framework API

So, I've been working on a project that consists of a .Net framework API and an Angular frontend. I recently implemented OWIN JWT authentication, but now I'm encountering a persistent 401 error no matter what I try. I've attempted numerous ...

The issue of Angular Change detection failing to work when using ChangeDetectionStrategy.OnPush with HttpClient.Subscribe

I have created a unique stackblitz showcasing an issue I've encountered. The problem arises when a parent component passes a boolean value to a child component as an @Input property. It should be noted that the parent component utilizes ChangeDetectio ...

"Error message: ngrx router is unable to access the property 'firstChild' as it is undefined

i'm encountering an issue with ngrx's router-store /module @NgModule({ imports: [ .... StoreModule.forRoot(reducers) StoreRouterConnectingModule.forRoot(), ... ], .... }) /store import { getSelectors, ...

Utilize Laravel endpoint for social media account integration to allow users to easily login or sign up

I am developing an application using Laravel 5.8 as the backend and Angular 7 for the frontend. 1. serve: Laravel 5.8 2. client: Angular 7 In my Laravel backend, I have set up endpoints for user Sign-up and Login as shown below: <?php namespace ...

Steer clear from using the implicit 'any' type while utilizing Object.keys in Typescript

I have a unique situation where I need to loop over an Object while maintaining their type without encountering the error "Element implicitly has an 'any' type because 'ContactList' has no index signature". Despite extensive discussion ...

Customize the index of NgFor in Angular to have more control over how items are

Currently, I am working with this ngIf block: <div class="clearfix" *ngFor="let item of result.items;let i = index"> <h5 *ngIf="itHasOpt(item)"> <span class="numberCircle">{{ i+1 }}</span> </h5> ... As the i valu ...

Error in React Typescript Props in ListItem (Material UI Component)

I am encountering a problem with the ContainerComponent and ContainerProps. I believe that the issue lies in the fact that "li" is defined as a type string, but it needs to be explicitly declared as type React.ElementType<React.HTMLAttributes>. Howev ...

Effortlessly adding custom classes in Angular 2 with a breeze

Imagine having a growing Angular2 typescript solution with numerous small classes and objects. Following the best practice, each class is placed in its own file. However, manipulating these objects leads to long lists of imports like: import {Object1} f ...

The chart is experiencing difficulty printing as it tries to retrieve data from the JSON file

I am currently working on displaying a chart using JSON data, specifically the Volume Sales data stored in an array. JSON: { "year1": { "volumeSales": "0.09", "valueSales": "1.23" }, "year2": { "volumeSales": "0.11", "valueSales": " ...

The issue with the tutorial is regarding the addHero function and determining the source of the new id

Whenever I need to introduce a new superhero character, I will utilize the add(string) function found in heroes/heroes.component.ts add(name: string): void { name = name.trim(); if (!name) { return; } this.heroService.addHero({ name } as H ...

Issues arise when building with Angular using `ng build`, but everything runs smoothly when using `

My Angular 5 application uses angular-cli 1.6.8 { "name": "test", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "karma": "ng test", "test": "jest", "test:watch": "j ...

Adding types to computed properties in Vue 3's Composition API is a seamless process

Having an issue where I am trying to add type to computed but keep encountering this error: Overload 1 of 2, '(getter: ComputedGetter<AuthFormType>, debugOptions?: DebuggerOptions | undefined): ComputedRef<AuthFormType>', gave the fol ...

The onChange event will not be triggered in an input component that is not intended to be uncontrolled

Could someone please assist me in understanding why the onChange event is not being triggered? I am customizing ChakraUI's Input component to retrieve a value from localStorage if it exists. The component successfully retrieves the value from localS ...

Leverage Angular, NodeJS, and Sequelize to extract data from HTML tables

Is there a way to extract data from a specific HTML table, identified by its ID, and save it into a mysql database using a NodeJS API with sequelize? The HTML code snippet that needs to be parsed: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

What is the best way to manage data types using express middleware?

In my Node.js project, I am utilizing Typescript. When working with Express middleware, there is often a need to transform the Request object. Unfortunately, with Typescript, it can be challenging to track how exactly the Request object was transformed. If ...

Utilizing the ngFor directive to iterate over an array of calendar objects

Looking to extract only the names of the months from the object array provided below using ngFor. How can this be achieved? { "Jan": { "name": "January", "short": "Jan", "number": 1, "days": 31 }, "Feb": { "name": "February", ...