บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 4/10
Structural directives
ใช้เพื่อเปลี่ยนโครงสร้าง DOM เช่น ซ่อน แสดง Loop แสดงผล โดยใน Angular จะมี Built-in มาให้ แล้วและมีวิธีการใช้คือสามารถประกาศที่ HTML ได้เลย โดยหลัก ๆ ที่จะใช้มีดังนี้
- *ngIf
ใช้เพื่อซ่อนแสดง DOM เมื่อตรงกับเงื่อนไข
<div class=”col-12” *ngIf=”condition”></div>ตัวอย่าง
ตัวแปร two_way > 10 ให้ แสดง <p>two_way is more than 10</p>
ในกรณีอยากททำ else สามารถใช้ ng-template ได้
ผลลัพธ์
เมื่อ two_way <= 10
เมื่อ two_way > 10
- *ngFor
ใช้ทำ Loop เพื่อแสดงผลใช้กับ Array
<div class=”col-12” *ngFor=”let item of array”>
{{ item }}
</div>ตัวอย่าง
Loop แสดงผล 1-10 เป็น Card โดยใช้ col-4
ผลลัพธ์
Attribute directives
ใช้เพื่อ เปลี่ยนแปลงลักษณะของ element (เช่น สี, สไตล์, behavior) โดยมีหลายตัว แต่ที่นิยมใช้จะมีดังนี้
- ngClass
ใช้เปลี่ยน CSS Class แบบ Dynamic จะมีการเพิ่ม Class เมื่อตรงเงื่อนไข
<p [ngClass]="{ classname: boolean }">Hello</p>ตัวอย่าง
ผลลัพธ์
เมื่อ two_way <= 10
เมื่อ two_way > 10
- ngStyle
เปลี่ยน Style ในรูปแบบ Inline โดยจะทำงานตามเงื่อนไข
<p [ngStyle]="{ css attb: boolean ? 'css value' : 'css value' }">Status</p>ตัวอย่าง
ผลลัพธ์
เมื่อ two_way <= 20
เมื่อ two_way > 20
- ngModel
ใช้ binding ตัวแปรใช้กับ Input
<input type="text" [(ngModel)]="var"/>ตัวอย่าง
ผลลัพธ์
ก่อนพิมพ์
หลังพิมพ์ จะเห็นว่าค่าถูกเปลี่ยนทันที
Basic Pipe
Pipe ใช้สำหรับ แปลงประเภท หรือ Format ข้อมูล เช่นการแสดงวันที่ ตัวเลข โดยใช้ได้ทั้งก่อนการเรียกฟังก์ชันแสดงผล หรือ แสดงผลตรง ๆ เลยก็ได้ โดยที่ใช้บ่อย ๆ จะมีดังนี้
- date
- uppercase
- lowercase
- currency
- percent
- number
โดยวิธีการใช้ให้ระบุ Pipe ที่หลังตัวแปรโดยขั้นด้วย “|” ก็สามารถใช้งานได้เลย
{{ variable_name | pipe }}ตัวอย่าง
ตัวแปรข้อมูล<br>
HTML
ผลลัพธ์
Custom Pipe
สามารถสร้าง Pipe เป็นของตัวเองได้ เพื่อแปลงข้อมูลเฉพาะทาง โดยวิธีทำมีดังนี้
ng generate pipe <path/ชื่อ pipe ที่จะสร้าง>
ng g p <path/ชื่อ pipe ที่จะสร้าง>เมื่อสร้างแล้วก็จะได้ไฟล์ pipe ออกมาให้ทำการเขียน transform เพื่อให้ได้ผลลัพธ์ตามที่ต้องการ เช่นต้องการ Reverse อักขระ
อย่าลืม Import ที่ไฟล์ AppModule (โดยปกติจะ Auto Import ให้แล้ว)
ทดลองเรียกใช้ได้เลย
ตัวแปรข้อมูล<br>
HTML
ผลลัพธ์
การเรียกใช้ Pipe ภายในไฟล์ .ts
ในการเรียกใช้บน .ts นั้นเราจะเรียกตรง ๆ โดยใช้ “|” ขั้นที่ตัวแปรไม่ได้ แต่สามารถ Import แล้วเรียกใช้ผ่าน pipe transform ได้ โดยมีวิธีการดังนี้
Import Pipe ใน Component ที่ต้องการใช้งาน
ตัวอย่าง
Reverse Pipe ที่มีมาแล้วใน LAB
ประกาศตัวแปรเก็บ Pipe โดย Pipe ถือเป็น 1 Object ต้องใช้ new Object();
ตัวแปร = new <ชื่อ Object ของ Pipe>();
เช่น
reversePipe = new ReversePipe();
เรียกใช้ในจุดที่ต้องการได้เลย
ตัวแปร = this.<ตัวแปรเก็บ Pipe>.transform(<ข้อมูล>)
ตัวอย่าง
ผลลัพธ์
🧪 LAB: ทำ Pipe เพื่อแสดงวันที่ในรูปแบบไทย และเป็นปี พ.ศ.
ให้สร้าง Pipe ชื่อ bdate เพื่อทำให้แปลงข้อมูลเป็นวันที่ในรูปแบบไทย
ใช้คำสั่ง
ng g p pipes/bdate
เขียน pipe ให้รับข้อมูลแล้วแปลงออกมาพร้อม return ให้ถูกในลักษณะของ วัน เดือน ปี พ.ศ.
ทดลองเรียกใช้งาน Pipe
