Pfthb

I am using angular 7 and want to display elements in component html if following condition is satisfied: given time is ahead of current time.

I tried below logic

 getTimeDiff(time, date)
 

 const dateNow = new Date()
 const slotDate = new Date(`$date $time`); // say time = '10:30:00' and date = '2018-11-14' 

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

 //if diff is not negative
 if(diff) 
 return false
 
 else 
 return true
 
 

HTML

<span *ngIf="getTimeDiff(result.endtime, result.date)"> open </span>

Update

Elements are displayed using *ngFor so I cannot call getTimeDiff in ngOnInit().

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

but for some reason I get:

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

That's a lifecycle error, saying Angular has already checked a value, but you're updating it for some reason.

If you put a console log in your function, you will see that it's called A LOT of time.

That's because functions, bound to directives, are called at every user interaction.

That means that everytime it's called, it gets a new date value (+1 ms)

To avoid that, create your date at component creation and compare on it. If you wish, you can update it some time, but not in the function itself.

constructor(private now = new Date()) 

getTimeDiff(time, date)

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

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

 //if diff is not negative
 if(diff) 
 return false
 
 else 
 return true
 
 

EDIT

To avoid your function being called, you could use a variable that is update on change :

this.timeDiff: boolean;

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


getTimeDiff(time, date)

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

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

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

In your HTML

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

ngDoCheck is a lifecycle hook (like ngOnInit) that can be summed up by

Function that detect changes that are not tracked by Angular

Angular runs change detection and when its find that some values which has been passed to the child component has been changed Angular throws the error ExpressionChangedAfterItHasBeenCheckedError.

Better to create one variable to hold the information rather than calling the same function on each change detection

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

getTimeDiff(time, date)


 const dateNow = new Date()
 const slotDate = new Date(`$date $time`); // say time = '10:30:00' and date = '2018-11-14' 

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

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

html

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

Note : Do not forget to call getTimeDiff function in appropriate place like ngOnInit if you want to get one time .