I am currently working on integrating a countdown timer using rxjs in my angular 12 project. Here is what I have in my typescript file:
let timeLeft$ = interval(1000).pipe(
map(x => this.calcTimeDiff(orderCutOffTime)),
shareReplay(1)
);
The calcTimeDiff() function will return the values for seconds, minutes, and hours;
My goal is to generate a string from these values and display it in the HTML. Essentially, I need to replace a specific word in the string with timeLeft$, which represents the countdown timer to be shown in the HTML.
For example: this.orderCutOffMessage = someString.replace('Down', timeLeft$)
orderCutOffTime = "1645567200000" // Unix timestamp in milliseconds
private calcTimeDiff(cutOffTime: any): timeComponents {
const finalCutOffTime = (cutOffTime).valueOf();
const milliSecondsInASecond = 1000;
const hoursInADay = 24;
const minutesInAnHour = 60;
const secondsInAMinute = 60;
const timeDifference = finalCutOffTime - Date.now();
const hoursToFinalCutOffTime = Math.floor(
(timeDifference /
(milliSecondsInASecond * minutesInAnHour * secondsInAMinute)) %
hoursInADay
);
const minutesToFinalCutOffTime = Math.floor(
(timeDifference / (milliSecondsInASecond * minutesInAnHour)) %
secondsInAMinute
);
const secondsToFinalCutOffTime =
Math.floor(timeDifference / milliSecondsInASecond) % secondsInAMinute;
return { secondsToFinalCutOffTime, minutesToFinalCutOffTime, hoursToFinalCutOffTime };
}