###### tags: `Angular` `pipes`

# Pipes元件

## {{ ‘傳入值’管你傳什麼 | pipe元件 }}

- 特性
- pipes 與 pipes 間可串接
- SlicePipe 可搭配結構型指令 (ngfor) 進行切割摘要

- 內建
- DatePipe
- UpperCasePipe => 全字母轉大寫
- LowerCasePipe => 全字母轉小寫
- CurrencyPipe
- and PercentPipe
- DecimalPipe => 數字標示顯示方法
- CurrencyPipe => 貨幣顯示方法
- SlicePipe => 切割 可切割字串及陣列

### DecimalPipe 標準式 數字標示顯示方法

<P> {{ value_expression | number [ : digitsInfo [ : locale ] ] }}</P>
<!-- value_expression => 參數代號 與ts連動 . digitsInfo預設 一位.三位 => 0.123 -->
<p> {{e | number:'3.1-5'}}</p>
<!-- 代表小數點前 三位 點後 一到五位 -->
<p>e (french): {{e | number:'4.5-5':'zh-TW'}}</p>
<!-- 國際化表示數值 -->
<p> {{e | number:'3.5-5'}}</p>
<!-- 代表小數點前 三位 點後 顯示五位 -->

### CurrencyPipe 標準式 貨幣顯示方法

> 台幣 TWD

<p>{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}</p>

<!--output '$0.26'-->
<p>A: {{a | currency}}</p>
<!--output 'CA$0.26'-->
<p>A: {{a | currency:'CAD'}}</p>
<!--output 'CAD0.26'-->
<p>A: {{a | currency:'CAD':'code'}}</p>
<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
<!--output '0 001,35 CA$'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
<!--output 'CLP1' because CLP has no cents-->
<p>B: {{b | currency:'CLP'}}</p>

### PercentPipe 標準式 百分比顯示方法

<P> {{ value_expression | percent [ : digitsInfo [ : locale ] ] }} </P>
<!-- digitsInfo預設 兩位 : 0.123 => 12%  可指定 -->

### DatePipe

<p> {{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }} </p>

- format 預設可傳入值為下
- 'short' => 'M/d/yy, h:mm a' (6/15/15, 9:03 AM).
- 'medium' => 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM).
- 'long' => 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1).
- 'full' => 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00).
- 'shortDate' => 'M/d/yy' (6/15/15).
- 'mediumDate' => 'MMM d, y' (Jun 15, 2015).
- 'longDate' => 'MMMM d, y' (June 15, 2015).
- 'fullDate' => 'EEEE, MMMM d, y' (Monday, June 15, 2015).
- 'shortTime' => 'h:mm a' (9:03 AM).
- 'mediumTime' => 'h:mm:ss a' (9:03:01 AM).
- 'longTime' => 'h:mm:ss a z' (9:03:01 AM GMT+1).
- 'fullTime' => 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00).

### SlicePipe 切割字串及陣列

<!-- 標準式 -->
{{ value_expression | slice : start [ : end ] }}

<a [href]="item.href">{{item.title | slice:0:20}}</a>
<!--  顯示"從命令提示字元中開啟 Visual St" => 20字元  -->

<a [href]="item.href">{{item.title | slice:-20}}</a>
<!-- 顯示"從命令提示字元中開啟 Visual St" => 倒數20字元 -->
<!-- 不加結尾參數 -->

<article class="post" id="post0" *ngFor="let item of data |slice:0:3">
<!-- 1-3筆 -->
<article class="post" id="post0" *ngFor="let item of data |slice:2:3">
<!-- 只顯示第3筆 -->