"Calculating the time difference between a specified time and the current time using Typescript can be achieved by

Question

"Calculating the time difference between a specified time and the current time using Typescript can be achieved by

Incorporating Angular 7, my goal is to exhibit elements in the component HTML only if a certain condition is met: namely, if the provided time is ahead of the current time.

After several attempts, I came up with the following logic:

 checkTimeDifference(time, date)
{
     const currentDate = new Date()
     const slotDate = new Date(`${date} ${time}`);

     const difference = Math.abs(Math.abs(currentDate.getTime() - slotDate.getTime()) / 3600000)

    // If the difference is not negative
   if(difference) {
     return false;
  } 
    else {
     return true;
   }
 }

For implementing this in HTML:

<span *ngIf="checkTimeDifference(result.endtime, result.date)"> opened </span>

Update:

The elements are being showcased using *ngFor loop, thus calling getTimeDiff in ngOnInit() is not feasible.

<div *ngFor="let result of results">
    <span *ngIf="checkTimeDifference(result.endtime, result.date)"> opened </span>
</div>

However, an error is encountered stating:

ViewAppointmentsComponent.html:30 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 6.0732225'. Current value: 'null: 6.0732252777777775'.

angular typescript date angular7

Answer 1

Answer №1

Encountering a lifecycle error in Angular? It could be because the value has already been checked by Angular, but you're trying to update it unnecessarily.

If you insert a console log within your function, you'll notice that it's being called frequently. This is due to functions bound to directives being triggered with every user interaction.

Each time the function is called, a new date value (+1 ms) is fetched. To prevent this behavior, initialize your date value during component creation and compare against it. You can update it later if needed, but avoid doing so directly within the function.

constructor(private now = new Date()) {}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    // check if difference is not negative
   if(diff) {
     return false;
  } 
    else {
     return true;
   }
 }

EDIT

To prevent multiple calls of your function, consider using a variable that updates upon change:

this.timeDiff: boolean;

ngDoCheck() {
  this.timeDiff(this.result.endtime, this.result.date);
}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    // check if difference is not negative
   if(diff) {
     this.timeDiff = false;
  } 
    else {
     this.timeDiff =  true;
   }
 }

In your HTML:

<span *ngIf="timeDiff"> open </span>

ngDoCheck serves as a lifecycle hook (similar to ngOnInit) and is used for detecting changes that are not tracked by Angular.

Answer 2

Encountering a lifecycle error in Angular? It could be because the value has already been checked by Angular, but you're trying to update it unnecessarily.

If you insert a console log within your function, you'll notice that it's being called frequently. This is due to functions bound to directives being triggered with every user interaction.

Each time the function is called, a new date value (+1 ms) is fetched. To prevent this behavior, initialize your date value during component creation and compare against it. You can update it later if needed, but avoid doing so directly within the function.

constructor(private now = new Date()) {}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    // check if difference is not negative
   if(diff) {
     return false;
  } 
    else {
     return true;
   }
 }

EDIT

To prevent multiple calls of your function, consider using a variable that updates upon change:

this.timeDiff: boolean;

ngDoCheck() {
  this.timeDiff(this.result.endtime, this.result.date);
}

getTimeDiff(time, date)
{
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(this.now.getTime() - slotDate.getTime()) /  3600000)

    // check if difference is not negative
   if(diff) {
     this.timeDiff = false;
  } 
    else {
     this.timeDiff =  true;
   }
 }

In your HTML:

<span *ngIf="timeDiff"> open </span>

ngDoCheck serves as a lifecycle hook (similar to ngOnInit) and is used for detecting changes that are not tracked by Angular.

Answer 3

Answer №2

Angular performs change detection and if it detects that the values passed to a child component have changed, Angular will throw an

ExpressionChangedAfterItHasBeenCheckedError

.

It is recommended to store the information in a variable rather than calling the same function on every change detection cycle.

different = false;  //<-- stores the difference state.

getTimeDiff(time, date)
{

     const currentDate = new Date()
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(currentDate.getTime() - slotDate.getTime()) /  3600000)

    // if diff is not negative
   if(diff) {
     this.different = false  //<-- set to false.
  } 
    else {
     this.different  = true  //<-- set to true.
   }
 }

html

<span *ngIf="different"> open </span>

Note : Remember to call getTimeDiff function at the appropriate place like ngOnInit if you want it to run only once.

Answer 4

Angular performs change detection and if it detects that the values passed to a child component have changed, Angular will throw an

ExpressionChangedAfterItHasBeenCheckedError

.

It is recommended to store the information in a variable rather than calling the same function on every change detection cycle.

different = false;  //<-- stores the difference state.

getTimeDiff(time, date)
{

     const currentDate = new Date()
     const slotDate = new Date(`${date} ${time}`);  // assuming time = '10:30:00' and date = '2018-11-14' 

     const diff = Math.abs(Math.abs(currentDate.getTime() - slotDate.getTime()) /  3600000)

    // if diff is not negative
   if(diff) {
     this.different = false  //<-- set to false.
  } 
    else {
     this.different  = true  //<-- set to true.
   }
 }

html

<span *ngIf="different"> open </span>

Note : Remember to call getTimeDiff function at the appropriate place like ngOnInit if you want it to run only once.

"Calculating the time difference between a specified time and the current time using Typescript can be achieved by

Answer №1

EDIT

Answer №2

html

Similar questions

Generating Typescript definition files from JavaScript files with module.exports assignment

How to Create a Flexible Angular Array Input Component

Executing a service call within an Angular 2 structural directive

What is the method for inserting two dashes within a number?

What are some recommended methods for sending payload while saving form data with a Reference field?

Issue encountered in Angular installation of Jest: unable to read property 'matches' as it is undefined

What is the process for incorporating external JS files into an Angular 6 project's angular.json configuration?

Filtering rows in angular based on the current data's id

Sorting an array of numbers in TypeScript using the array sort function

Display various items from a predefined list using Angular's *ngFor directive

The integration of ngx-translate with an HTTP interceptor is currently experiencing difficulties

Using Angular to embed an external PDF link into an iframe

Preventing JavaScript Compilation for a Specific Folder using tsconfig: A Step-by-Step Guide

What values are typically used in the "types" field of a package.json file?

Encountering an issue with Next.js, Typescript, and mongoose when attempting to use `let cached = global.mongoose

Challenge encountered with asynchronous angular queries

Obtain the object literal string with additional decorative strings surrounding it

Having trouble pushing data to a GraphQL database from my Next.js application

How can I integrate a timer into an Angular carousel feature?

Using TypeScript to specify precise types for ReactWrapper within the Enzyme library