I'm currently working on developing a countdown timer for a daily recurring event using Angular 4, RxJS Observables, and the Async Pipe feature. Let's take a look at my component implementation:
interface Time {
hours: number;
minutes: number;
seconds: number;
}
@Component({
selector: 'app-header-area',
templateUrl: './header-area.component.html',
styleUrls: [ './header-area.component.scss' ]
})
export class HeaderAreaComponent {
@Input() language: LanguageState;
@Input() menu: MenuState;
remaining: Time;
hoursLeft: number;
minutesLeft: number;
secondsLeft: number;
timeLeft(date) {
const utc_hours = date.getUTCHours();
const utc_minutes = date.getUTCMinutes();
const utc_seconds = date.getUTCSeconds();
const end_hour = 20;
const difference_hours = (utc_hours <= end_hour) ? (end_hour - utc_hours) : (24 + end_hour) - utc_hours;
const difference_minutes = 60 - (utc_minutes % 60) - 1;;
const difference_seconds = 60 - (utc_seconds % 60) - 1;;
return <Time>{
hours: difference_hours,
minutes: difference_minutes,
seconds: difference_seconds,
}
}
constructor() {
timer(0, 1000).subscribe(() => {
const time = this.timeLeft(new Date());
const { hours, minutes, seconds } = time;
this.hoursLeft = hours;
this.minutesLeft = minutes;
this.secondsLeft = seconds;
});
}
}
This is how I've set up my template:
<span class="auctions-text">Auctions close in <b>{{ hoursLeft }} hours {{ minutesLeft }}m {{ secondsLeft }}s</b></span>
My main query revolves around utilizing RXJS timer along with other operators to generate an Observable that can be seamlessly integrated with an async pipe within my template setup. Can anyone provide guidance on this?