Time CountDown in angular 2
I thought it made more sense to create the timer as a Service so I can have more flexibility when creating my views (use the returned Time model however you want in your components). It creates a new observable upon subscription so each subscriber gets their own observable. In short, you can create as many timers at the same time with this service as you want. Be sure to include this service in your AppModule provider's array so you can use it throughout your application.
Service:
import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/defer';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';
export interface Time {
days: number;
hours: number;
minutes: number;
seconds: number;
}
@Injectable()
export class TimerService {
constructor() { }
private createTimeObject(date: Date): Time {
const now = new Date().getTime();
const distance = date.getTime() - now;
let time: Time = {days: 0, hours: 0, minutes: 0, seconds: 0};
time.days = Math.floor(distance / (1000 * 60 * 60 * 24));
time.hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
time.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
time.seconds = Math.floor((distance % (1000 * 60)) / 1000);
return time;
}
timer(date: Date): Observable<Time> {
return Observable.interval(1000)
.map(() => this.createTimeObject(date))
}
}
Now use it in a Component:
import {Component, OnInit} from '@angular/core';
import {Time, TimerService} from '../timer.service';
@Component({
selector: 'app-timer',
template: `
<ng-container *ngIf="time1$ | async as time1"
<pre>{{time1.days}}days {{time1.hours}}hours {{time1.minutes}} minutes {{time1.seconds}}seconds<pre>
<br>
<ng-container>
<ng-container *ngIf="time2$ | async as time2"
<pre>{{time2.days}}days {{time2.hours}}hours {{time2.minutes}} minutes {{time2.seconds}}seconds<pre>
<br>
<ng-container>
`
})
export class TimerComponent implements OnInit {
time1$: Observable<Time>;
time2$: Observable<Time>;
constructor(private timerService: TimerService) {}
ngOnInit() {
this.time1$ = this.timerService.timer(new Date('June 4, 2020 15:37:25'))
this.time2$ = this.timerService.timer(new Date('August 9, 2041 15:37:25'))
}
This is a bit simplified version with hardcoded date and returning four different outputs (days - hours - minutes - seconds) that you can put nicely in four boxes:
export class HomePage {
// Hardcoded date
private eventDate: Date = new Date(2018, 9, 22);
private diff: number;
private countDownResult: number;
private days: number;
private hours: number;
private minutes: number;
private seconds: number;
constructor(public navCtrl: NavController ) {
Observable.interval(1000).map((x) => {
this.diff = Math.floor((this.eventDate.getTime() - new Date().getTime()) / 1000);
}).subscribe((x) => {
this.days = this.getDays(this.diff);
this.hours = this.getHours(this.diff);
this.minutes = this.getMinutes(this.diff);
this.seconds = this.getSeconds(this.diff);
});
}
getDays(t){
return Math.floor(t / 86400);
}
getHours(t){
const days = Math.floor(t / 86400);
t -= days * 86400;
const hours = Math.floor(t / 3600) % 24;
return hours;
}
getMinutes(t){
const days = Math.floor(t / 86400);
t -= days * 86400;
const hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
const minutes = Math.floor(t / 60) % 60;
return minutes;
}
getSeconds(t){
const days = Math.floor(t / 86400);
t -= days * 86400;
const hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
const minutes = Math.floor(t / 60) % 60;
t -= minutes * 60;
const seconds = t % 60;
return seconds;
}
}
import { Component, NgOnInit, ElementRef, OnInit, OnDestroy } from 'angular2/core';
import { Observable, Subscription } from 'rxjs/Rx';
@Component({
selector: 'my-app',
template: `
<div>
{{message}}
</div>
`
})
export class AppComponent implements OnInit, OnDestroy {
private future: Date;
private futureString: string;
private counter$: Observable<number>;
private subscription: Subscription;
private message: string;
constructor(elm: ElementRef) {
this.futureString = elm.nativeElement.getAttribute('inputDate');
}
dhms(t) {
var days, hours, minutes, seconds;
days = Math.floor(t / 86400);
t -= days * 86400;
hours = Math.floor(t / 3600) % 24;
t -= hours * 3600;
minutes = Math.floor(t / 60) % 60;
t -= minutes * 60;
seconds = t % 60;
return [
days + 'd',
hours + 'h',
minutes + 'm',
seconds + 's'
].join(' ');
}
ngOnInit() {
this.future = new Date(this.futureString);
this.counter$ = Observable.interval(1000).map((x) => {
return Math.floor((this.future.getTime() - new Date().getTime()) / 1000);
});
this.subscription = this.counter$.subscribe((x) => this.message = this.dhms(x));
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
HTML:
<my-app inputDate="January 1, 2018 12:00:00">Loading...</my-app>
Made some few changes to Johnnyfittizio's answer. https://stackoverflow.com/a/40784539/4579897
import {Observable} from 'rxjs/Rx';
import {Component, OnInit} from '@angular/core';
export class TimerComponent implements OnInit {
private _trialEndsAt;
private _diff: number;
private _days: number;
private _hours: number;
private _minutes: number;
private _seconds: number;
constructor() {}
ngOnInit() {
this._trialEndsAt = "2017-02-28";
Observable.interval(1000).map((x) => {
this._diff = Date.parse(this._trialEndsAt) - Date.parse(new Date().toString());
}).subscribe((x) => {
this._days = this.getDays(this._diff);
this._hours = this.getHours(this._diff);
this._minutes = this.getMinutes(this._diff);
this._seconds = this.getSeconds(this._diff);
});
}
getDays(t){
return Math.floor( t/(1000*60*60*24) );
}
getHours(t){
return Math.floor( (t/(1000*60*60)) % 24 );
}
getMinutes(t){
return Math.floor( (t/1000/60) % 60 );
}
getSeconds(t){
return Math.floor( (t/1000) % 60 );
}
}