Pipes ใน Angular 2 มีไว้สำหรับ transform, filter หรือไว้จัดรูปแบบข้อมูลต่างๆ เราสามารถแทรก | เข้าไปใน html ได้เลย
1. uppercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์ใหญ่ทั้งหมด
<p>{{ ‘Coding Thailand’ | uppercase }}</p>
<!– ผลลัพธ์ คือ CODING THAILAND –>
2. lowercase มีไว้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็กทั้งหมด
<p>{{ ‘Coding Thailand’ | lowercase }}</p>
<!– ผลลัพธ์ คือ coding thailand –>
3. number ใช้สำหรับจัดรูปแบบของตัวเลขต่างๆ เช่น
<p>{{ 12345 }}</p>
<!– ผลลัพธ์ คือ ‘12345’ –>
<p>{{ 12345 | number }}</p>
<!– ผลลัพธ์ คือ ‘12,345’ –>
<p>{{ 12345 | number:’6.’ }}</p>
<!– ผลลัพธ์ คือ ‘012,345’ –>
<p>{{ 12345 | number:’.2′ }}</p>
<!– ผลลัพธ์ คือ ‘12,345.00’ –>
4. percent จัดรูปแบบข้อมูลในรูปแบบ %
<p>{{ 0.8 | percent }}</p>
<!– ผลลัพธ์ คือ ‘80%’ –>
<p>{{ 0.8 | percent:’.3′ }}</p>
<!– ผลลัพธ์ คือ ‘80.000%’ –>
5. currency ใช้สำหรับจัดรูปแบบในรูปสกุลเงิน
<p>{{ 10.6 | currency:’EUR’ }}</p>
<!– ผลลัพธ์ คือ ‘EUR10.6′ –>
<p>{{ 10.6 | currency:’USD’:true }}</p>
<!– ผลลัพธ์ คือ ‘$10.6′ –>
<p>{{ 10.6 | currency:’USD’:true:’.2′ }}</p>
<!– ผลลัพธ์ คือ ‘$10.60’ –>
6. date ใช้สำหรับจัดรูปแบบวันที่และเวลา
<p>{{ birthday | date:’ddMMyyyy’ }}</p>
<!– ผลลัพธ์ คือ ’07/16/1986′ –>
<p>{{ birthday | date:’longDate’ }}</p>
<!– ผลลัพธ์ คือ ‘July 16, 1986′ –>
<p>{{ birthday | date:’HHmmss’ }}</p>
<!– ผลลัพธ์ คือ ’15:30:00′ –>
<p>{{ birthday | date:’shortTime’ }}</p>
<!– ผลลัพธ์ คือ ‘3:30 PM’ –>