สาระน่ารู้เกี่ยวกับ Angular 2 เรื่อง Pipes

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’ –>