パイプによるデータのフォーマット

パイプはオプションを渡すことで、さらに使い道を広げることができます。

このアクティビティでは、いくつかのパイプとパイプパラメーターについて学びます。

パイプにパラメーターを渡すには、:構文の後にパラメーター値を記述します。例を以下に示します。

      
template: `{{ date | date:'medium' }}`;
    

出力は Jun 15, 2015, 9:43:11 PM となります。

パイプの出力をカスタマイズしてみましょう。

1. DecimalPipe を使用して数値をフォーマットする

   app.component.ts のテンプレートを更新して、decimal パイプのパラメーターを含めます。

         
   template: `
       ...
       <li>Number with "decimal" {{ num | number:"3.2-2" }}</li>
   `
       

   注: このフォーマットは何でしょう？DecimalPipe のパラメーターは digitsInfo と呼ばれ、{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} のフォーマットを使用します。

2. DatePipe を使用して日付をフォーマットする

   次に、テンプレートを更新して date パイプを使用します。

         
   template: `
       ...
       <li>Date with "date" {{ birthday | date: 'medium' }}</li>
   `
       

   さらに楽しくするために、date に対してさまざまなパラメーターを試してみてください。詳細については、Angular ドキュメントを参照してください。

3. CurrencyPipe を使用して通貨をフォーマットする

   最後の作業として、テンプレートを更新して currency パイプを使用します。

         
   template: `
       ...
       <li>Currency with "currency" {{ cost | currency }}</li>
   `
       

   currency に対してさまざまなパラメーターを試すこともできます。詳細については、Angular ドキュメントを参照してください。

パイプに関する素晴らしい作業です。ここまで素晴らしい進歩を遂げてきましたね。

アプリケーションで使用できる組み込みのパイプは他にもたくさんあります。Angular ドキュメントでそのリストを見つけることができます。

組み込みのパイプがニーズを満たさない場合は、カスタムパイプの作成もできます。詳細については、次のレッスンをご覧ください。