月間26,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

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

 

 

僕のPC環境

Angular:8

 

 

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

以下が公式サイトになります。ここに記載していないものはカスタマイズするしかありません。

URL:「https://angular.io/api/common/DatePipe」

 

 

今回やりたいこと

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

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

 

 

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

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

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

 

 

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

 

 

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

 

 

Advertisement

 

おすすめ書籍

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

 

 

 

まとめ

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

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

ではまた!

Travelerを知らないの?