はじめに

Angular とchart.js でサンプルを作成している際に x軸として毎秒更新されるdate を生成したい時があります。
今回はJavascript のDate を利用する方法と moment.jsを利用する方法をまとめます。

stackblitz貼っておきます。
stackblitz.com

Javascript Date()

setInterval として 1000ms を指定しnew Date() を this.time に毎秒上書くことで、最新の日時を表示することができます。

time = new Date();
timer: NodeJS.Timer;

this.timer = setInterval(() => this.time = new Date(), 1000);

moment.js の場合でもsetInterval として 1000ms を指定し moment().format('MM/DD HH:mm:ss') を this.momenttime へ毎秒上書きしています。

momenttime: string;
momenttimer: NodeJS.Timer;

this.momenttimer = setInterval(() => this.momenttime = moment().format('MM/DD HH:mm:ss'), 1000);

Angularを利用しているのでngOnDestroy にて clearInterval しています。
これを忘れると、ページを遷移しても裏で毎秒更新が走ってしまいます。

ngOnDestroy() {
  clearInterval(this.timer);
  clearInterval(this.momenttimer);
}

Typescript / moment.js で毎秒更新されるClock を作成することができました。