Help us understand the problem. What is going on with this article?

【Angular】小ネタ:現在時刻の表示

More than 1 year has passed since last update.

はじめに

現在時刻を表示するサンプルソースがなかなか見つからなかったので。
こんな感じでやってますという小ネタです。
イメージはこんな感じです。
ezgif.com-video-to-gif.gif

コンポーネント側

ソース

app.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  now: Observable<Date>;
  intervalList = [];

  constructor() {
  }

  public ngOnInit() {
    this.now = new Observable((observer) => {
      this.intervalList.push(setInterval(() => {
        observer.next(new Date());
      }, 1000));
    });
  }

  ngOnDestroy() {
    if (this.intervalList) {
      this.intervalList.forEach((interval) => {
        clearInterval(interval);
      });
    }
  }
}

やってること

  • observerに毎1秒毎に新たなDateを渡す
  • interval IDを保持しておく
  • ngOnDestroy時にclearIntervalでリセットしておく

clearIntevalしないと、たとえページ遷移してもずっと呼び出されるのでそこだけ注意です。
intervalIDの保持はリストである必要はありません。
ただ、複数の場所で使用するとその分保持すべきIDが増えるので、リストを使用しています。

html側

ソース

app.component.html
{{ now | async | date:'yyyy年MM月dd日 HH:mm:ss' }}

やってること

  • AsyncPipeを使ってDateを受け取る
  • 受け取ったDateを、DatePipeに流してフォーマットする

これだけです。

終わりに

これで現在時刻のリアルタイム表示が出来ます。
もっとシンプルな方法や、間違いの指摘等あればコメントよろしくお願いします。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away