Angularのビルトインパイプ

Angularのパイプを使用すると、テンプレートでデータを直接変換する簡単な方法が得られます。独自のカスタムパイプを作成できます。また、CommonModuleの一部であり、箱から出してすぐに使用できる次のパイプのいずれかを使用することもできます。

この投稿はAngular2以上をカバーしています

非同期

Async パイプは、ObservableまたはPromiseを自動的にサブスクライブし、出力された値を次のように返します。

<ul>
  <li *ngFor="let item of data | async">
    {{ item.name }}
  </li>
</ul>

通貨

Currency パイプを使用すると、数値をさまざまな通貨でフォーマットできます。

{{ price | currency:'CAD' }}
{{ price | currency:'USD':true }}
{{ price | currency:'EUR':false:3.2-2 }}

最初の引数は、現地通貨コードを含む文字列です。
2番目に考えられる引数は、通貨記号または通貨コードのいずれかを表示するブール値です。デフォルトはfalseで、通貨コードが表示されます。
3番目に可能なのは、数値をフォーマットするための10進パイプのフォーマットの文字列です。

日にち

Dateパイプを使用して日付値をフォーマットします。

{{ someDate | date:'medium' }}
{{ someDate | date:'fullDate' }}
{{ someDate | date:'yy' }}
{{ someDate | date:'Hm' }}

いくつかの記号を使用してカスタム形式を定義することも、いくつかの事前定義されたキーワードを使用することもできます。使用可能なキーワードは次のとおりです。'medium'、'short' 、'fullDate' 、'longDate' 、 'mediumDate' 、'shortDate' 、'mediumTime'[X182X]および'shortTime'[X207X]。

シンボルのリストについては、公式のAPIリファレンスを参照してください。

10進数

Decoral パイプは、10進値をフォーマットします。

{{ decimalValue | number:'4.3-5' }}

上記の例（ '4.3-5' ）では、4は整数の最小桁数、3は小数桁の最小数、5は小数桁の最大数です。

Json

Json パイプはデバッグに役立ち、オブジェクトをJson文字列として表示します。舞台裏でJSON.stringifyを使用します。

{{ someObject | json }}

LowerCaseとUpperCase

それぞれのパイプでテキストを小文字または大文字に変換します。

{{ user.name | uppercase }}
{{ user.name | lowercase }}

パーセント

Percent パイプは、数値をそのパーセンテージ値に変換します。

{{ decimalValue | percent }}
{{ decimalValue | percent:'3.2-3' }}

オプションの引数は、Decimalパイプ形式の文字列です。

スライス

Sliceパイプを使用してサブセットリストまたは文字列を作成します。

{{ someText | slice:3:6 }}
<ul>
  <li *ngFor="let item of someList | slice:2">
    {{ item }}
  </li>
</ul>

引数は、開始インデックスと終了インデックスです。終了インデックスは省略でき、結果のリストまたは文字列には、開始インデックスから終了までのすべてが含まれます。

👉現在実験段階にある2つの組み込みパイプもあります：I18nPluralとI18nSelect。