Directives คือ สิ่งที่เราเพิ่มเข้าไปใน Tag ของ HTML ซึ่งจะไปสร้าง behavior ให้กับ DOM หรือ เปลี่ยนรูป DOM จะแบ่งออกเป็น 2 ประเภทใหญ่ๆ ได้แก่
1. Built-in Directive ซึ่งส่วนใหญ่ขึ้นต้นด้วย *ng ที่ Angular มีมาให้ก็จะมีมากมาย อาทิเช่น
- ng-app : ฺบอกให้ Bootstrap เริ่มทำงาน Angular กับ element ไหน
- ng-controller : จะใช้ controller จัดการกับ view ไหน
- ng-model : binding ค่าเข้า view กับ model
- ng-show/ ng-hide : เพื่อแสดง/ซ่อน element
- ngFor : ใช้ในการวนลูป
- ngIf : ใส่เงื่อนไขเช็คค่า
2. Custom Directive ที่เราสามารถกำหนดเอง จะแบ่งเป็น
- HTML DOMS element – เราสามารถสร้าง element ใหม่ของเราขึ้นมาเองได้ เช่น <ma-directive></ma-directive>
- attribute เราสามารถสร้าง attribute ให้กับ element เช่น <div ma-directive=”test”></div>
- class name ตั้งชื่อคลาส เช่น <div class=”ma-directive: test;”></div>
- comment เช่น <!–directive: ma-directive test –>
เราจะมาลองทำทั้งสองแบบ ก่อนอื่นสร้าง component ใหม่ชื่อ user โดยใช้คำสั่งดังภาพที่ 1 และใส่เพิ่ม tag
ภาพที่ 1 สร้าง user component
จากนั้นเปิดไฟล์ user.component.ts เพิ่มโค้ดดังภาพที่ 2 ซึ่งเป็นการกำหนดตัวแปรชื่อ users เก็บข้อมูลแบบ array แต่ละ user ประกอบไปด้วย name, code และ status ซึ่งเราจะนำไปวนลูปแสดงข้อมูล
ภาพที่ 2 สร้าง array ของ users
การใช้ Built-in Directive ในที่นี้จะยกตัวอย่าง ngFor สำหรับการวนลูป ซึ่งเราสามารถนำไปใส่ใน HTML Tag หรือ HTML Element นั้นๆได้เลยในไฟล์ user.component.html และหากต้องการใส่เงื่อนไข เราสามารถใช้ ngIf เพื่อเช็คค่าต่างๆ ดังภาพที่ 3
ภาพที่ 3 ตัวอย่างการใช้ ngFor และ ngIf
จากภาพที่ 3 เราใช้ ngIf เพื่อตรวจสอบสถานะของ user โดยถ้าสถานะเป็น single จะแสดงรูปดาว และสถานะ married จะแสดงรูปหัวใจ เมื่อรันหน้าเว็บจะปรากฎหน้าจอดังภาพที่ 4
ภาพที่ 4 ผลลัพธ์ที่ได้
สำหรับตัวอย่างการทำ Custom Directive เราจะมาสร้าง highlight เมื่อเอาเมาส์ไปชี้ที่ชื่อ user โดยใช้คำสั่งดังภาพที่ 5 เพื่อสร้างDirective ชื่อ highlight
ภาพที่ 5 คำสั่งสร้าง Custom Directive
จากนั้นเปิดไฟล์ highlight.directive.ts ดังภาพที่ 6 ซึ่ง selector เป็นตัวบอกว่าคอมโพเน้นของเราจะมีชื่อเป็นอะไรเมื่อไปปรากฎที่ HTML Element หรือ Attribute ส่วนการเรียกใช้งานก็ให้อ้าง attribute “appHighlight” ตามภาพที่ 3
ภาพที่ 6 highlight directiveจากภาพที่ 6 เป็นการเซตค่าเมื่อเอาเมาส์ไปชี้ onMouseEnter โดยจะไปเรียกฟังก์ชั่น highlight() เพื่อที่จะเปลี่ยนสีพื้นหลัง และ ขนาดตัวอักษร และเมื่อเอาเมาส์ออกเรียกฟังก์ชั่น undoHighlight() ซึ่งจะได้ผลลัพธ์ดังภาพที่ 7
ภาพที่ 7 แสดงผลลัพธ์การทำ highlight directive