Display digital clock in angular
// in ts file
import { Component, OnInit } from '@angular/core';
import { Subscription, timer } from 'rxjs';
import { map, share } from "rxjs/operators";
import { OnDestroy } from '@angular/core';
@Component({
selector: 'app-clock',
templateUrl: './clock.component.html',
styleUrls: ['./clock.component.scss']
})
export class ClockComponent implements OnInit, OnDestroy {
date: Date = new Date();
constructor() {
}
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();
}
}
}
// in html
Simple Clock:
<div>{{ time | date: 'hh:mm:ss a' }}</div>
RxJS Clock:
<div>{{ rxTime | date: 'hh:mm:ss a' }}</div>