Display time/clock in angular
Alternatively, you can use observables:
private _time$: Observable<Date> = timer(0, 1000).pipe(
map(tick => new Date()),
shareReplay(1)
);
get time() {
return this._time$;
}
And in your html:
{{ time | async | date: 'hh:mm:ss a' }}
Inside component.ts
time = new Date();
rxTime = new Date();
intervalId;
subscription: Subscription;
ngOnInit() {
// Using Basic Interval
this.intervalId = setInterval(() => {
this.time = new Date();
}, 1000);
// Using RxJS Timer
this.subscription = timer(0, 1000)
.pipe(
map(() => new Date()),
share()
)
.subscribe(time => {
this.rxTime = time;
});
}
ngOnDestroy() {
clearInterval(this.intervalId);
if (this.subscription) {
this.subscription.unsubscribe();
}
}
Inside component.html
Simple Clock:
<div>{{ time | date: 'hh:mm:ss a' }}</div>
RxJS Clock:
<div>{{ rxTime | date: 'hh:mm:ss a' }}</div>
Working demo
Alternative using an observable and "onPush" change detection
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Observable, timer } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'time',
template: "{{ $time | async | date: 'hh:mm:ss a' }}",
styleUrls: ['./time.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TimeComponent {
public $time: Observable<Date> = timer(0, 1000).pipe(map(() => new Date()));
}