Angularの組み込みPipes
Angularは、利用頻度の高い表1のような変換処理を、組み込み（Buillt-in）Pipesとして提供しています。Angularが提供するすべての組み込みPipesは、APIリファレンスで確認できます。
| Pipesのクラス名 | テンプレートに記述する名前 | 機能 |
|---|---|---|
| UpperCasePipe | uppercate | アルファベットを大文字に変換 |
| LowerCasePipe | lowercate | アルファベットを小文字に変換 |
| DatePipe | date | 日時（Dateオブジェクト）を変換 |
| DecimalPipe | number | 数値を変換 |
| CurrencyPipe | currency | 数値を金額に変換 |
| PercentPipe | percent | 数値をパーセント表示に変換 |
ここからは、いくつかの組み込みPipesについて利用法を説明していきます。
日時を変換するDatePipe
DatePipeは、JavaScriptのDateオブジェクトを変換するPipesです。図2のサンプルで記述方法を説明します。
このサンプルのルートコンポーネントはリスト2です。
@Component({
selector: "my-app",
template: `
<h1>Angular サンプル2</h1>
<div>変換前：{{sampleValue}}</div>
<div>変換後1：{{sampleValue | date}}</div> <!--（1）-->
<div>変換後2：{{sampleValue | date:"yyyy年MM月dd日"}}</div> <!--（2）-->
<div>変換後3：{{sampleValue | date:"HH時mm分ss秒"}}</div> <!--（3）-->
<div>変換後4：{{sampleValue | date:"shortTime"}}</div> <!--（4）-->
`
})
export class AppComponent {
// 2017年5月6日 13時25分32秒 ...（5）
sampleValue:Date = new Date(2017,4,6,13,25,32);
}
画面に表示するのは（5）のDateオブジェクトsampleValueです。（1）の「| date」記述で、sampleValueがDatePipeの標準形式（この場合は「May 6, 2017」）で画面表示されます。
Pipesには「:」の後ろにパラメーターを指定できるものがあります。DatePipeの場合、（2）や（3）のように日時のフォーマットを直接指定したり、（4）のように、DatePipeで定義されているフォーマット名を指定したりできます。フォーマット名の例を表2に示します。
| 名前 | 表示例 |
|---|---|
| shortTime | 1:25 PM |
| mediumTime | 1:25:32 PM |
| shortDate | 5/6/2017 |
| fullDate | Friday, May 6, 2017 |
フォーマット指定方法の詳細は、DatePipeのAPIリファレンスを参照してください。
［補足］DatePipeの注意点
現状では、以下のようなDatePipeの挙動に注意が必要です。
（1）ECMAScript Internationalization APIサポートとMicrosoftのブラウザー
DatePipe（とDecimalPipe、CurrencyPipe、PercentPipe）は、内部的にJavaScriptの国際化API「ECMAScript Internationalization API」を利用しているため、このAPIをサポートしないブラウザー（Chrome、Firefox、Edge、IE11、Safari 10以外のブラウザー）では、index.htmlにリスト3の記述を加えて、互換ライブラリを読み込む必要があります。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
ただし、Microsoft EdgeとIE11では、リスト2（3）で指定している時分秒のフォーマットが図3のように表示されてしまいます。リスト3の記述を追加しても解消されません。
（2）Webページのロケールとフォーマット文字列
リスト2の（1）（4）では、英語の形式で日時が表示されます。これはWebページのロケールが英語に設定されているためで、app.modules.tsにリスト4のProviderを指定してロケールを切り替えると、日本語の形式で日時が表示されるようになります。
@NgModule({
（略）
providers: [{provide: LOCALE_ID, useValue: 'ja-JP'}]
})
ただし日本語ロケールでは、例えばリスト2（2）の「yyyy」が「2017年」、「dd」が「06日」のように、「年」や「日」を含んだ文字列に置換されるため、フォーマット文字列を調整しないと図4のような正しくない表示になります。
数値を変換するDecimalPipe
DecimalPipeは、数値の表示形式を変換するPipesです。数値を変換表示する図5のサンプルで利用方法を説明します。
このサンプルのルートコンポーネントはリスト5です。
@Component({
selector: "my-app",
template: `
<h1>Angular サンプル3</h1>
<div>変換前：{{sampleValue}}</div>
<div>変換後1：{{sampleValue | number}}</div> <!--（1）-->
<div>変換後2：{{sampleValue | number:"5.1-2"}}</div> <!--（2）-->
`
})
export class AppComponent {
// 表示する数値 ...（3）
sampleValue:number = 1234.56789;
}
画面に表示するのは（3）のsampleValueです。（1）の「| number」記述により、sampleValueの値がDecimalPipeのデフォルト形式（整数部は3桁ごとにカンマ区切り、小数点以下3位まで）で表示されます。
（2）では「:」の後ろにパラメーターを追加して、表示形式を調整しています。パラメーターの「5.1-2」は、表3の意味を持ちます。
| 数字 | 意味 |
|---|---|
| 5 | 整数部の最小桁数（足りない分はゼロ詰め） |
| 1 | 少数部の最小桁数（足りない分はゼロ詰め） |
| 2 | 少数部の最大桁数（超過分は四捨五入） |
この場合、整数部が5桁になるようにゼロ詰めされ、少数部は最大桁数（2桁）を超過した分が四捨五入されるので、「01,234.57」のような表示になります。
［補足］Pipesのパラメーターをコンポーネントのプロパティで設定
ここまでのサンプルでは、「:」の後ろに設定するPipesのパラメーターに直接値を設定しましたが、コンポーネントのプロパティで設定することもできます。例えばリスト6の場合、formatプロパティに設定された文字列がPipesのパラメーターになります。
{{sampleValue | number:format}}
（略）
export class AppComponent {
// Pipesのパラメーターに設定される
format:string = "5.1-2";
}
