やっほー
【Angular】Pipeで日付カスタマイズをする方法!

【Angular】Pipeで日付カスタマイズをする方法!

  • 2019年6月19日
  • 2021年3月17日
  • Angular
  • 13view

AngularのPipeは「値をいい感じに変換してくれる機能」です

が、自分が望んでいるものがなかったりします。

ということで今回は、Pipeで日付カスタマイズをする方法を解説します!

日付パイプのデフォルトはこれ!

こちらが公式サイトになります。

ここに記載していないものはカスタマイズするしかありません。

今回やりたいこと

今回は、「YYYYMMDD」形式の値を「YYYY/MM/DD」に変換してみたいと思います。

要はスラッシュを入れるだけです。

Pipeで日付カスタマイズをする方法

まずは、Pipeを作成します。

※自動的にapp.module.tsに追記されます。

 

↑のような感じで実装します。これだけ。

 

あとは、HTML側で使用するだけです。

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

Pipe自体は非常に簡単ですね。

画面に表示する見た目を変えたい場合に便利ですね。

ではまた!

【Angular】Pipeで日付カスタマイズをする方法!
フォローしてもらえると泣いて喜びます