LoginSignup
2
1

More than 3 years have passed since last update.

Angular パイプ

Last updated at Posted at 2019-05-28

Angular パイプとは

angular.png

  • パイプとは「与えられたデータを整形する機能」です。

データがパイプを通って、新しい形にしてくれてるんだなーって勝手に思っています。ドラえもんのガリバートンネルみたいな? 笑

例えば、helloHELLOと大文字にしたい時ありますよね。

その時は以下のように記述します。

{{ "hello" | uppercase }}

このようにAngularはいくつかのパイプをすでに用意してくれています。

パイプの種類

パイプにも種類があります。
大きく分けると以下の二つです。

  • ビルトインパイプ
  • カスタムパイプ

ビルトインパイプ

Angularが用意してくれている、パイプです。
一部ですが以下のようなパイプが用意されています。

  • DatePipe
    • 日付を人が読みやすい形にしてくれる。
  • CurrencyPipe
    • ドルや日本円表記にしてくれる。
  • PercentPipe
    • 1.0を100%に変換してくれる。

カスタムパイプ

独自のカスタムパイプを記述し、使用することもできます。
こんなパイプあれば良いのになーって思った時に作るやつですね。

カスタムパイプは実際のコードをみた方がわかりやすいと思うので、分けて別投稿させて頂きます。
投稿した際にはここにリンクを貼っておきます。:raised_hand:

参考

Angular公式
パイプ機能の使い方
Angular 入門 パイプ

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1