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

ng2

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

 

ป.ล. เราสามารถใช้ความรู้ตรงนี้กับ Ionic Framework 2 ได้ด้วยนะครับ
ป.ล. 2 เราสามารถสร้าง Pipes แบบ custom ของเราเองได้ด้วยนะครับ เช่น อยากเอา Moment.js มาใช้สำหรับจัดรูปแบบหรือจัดการเกี่ยวกับวันที่ก็ได้ 🙂
โค้ชเอก

โค้ชเอก

Coding Mentor

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

  1. อยากให้เขียนบทความเกี่ยวกับ Angular 2 ที่นำ ฐานข้อมูลSQL มาแสดงหน้าเว็บจังเลยครับ พอดีหาศึกษาไม่ค่อยได้เลย

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.