Angular 19 + PrimeNG ตอนที่ 3: Component และ Data Binding

บทความนี้เป็นส่วนหนึ่งของซีรีส์ Angular + PrimeNG 19 (CSR, non-standalone) เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD. — ตอนที่ 3/10

วิธีการสร้าง Component ใช้คำสั่ง

ng generate component <path/component name>
หรือ
ng g c <path/component name>

โดยเมื่อสร้างแล้วจะมี Folder ตามชื่อ Component ที่สร้างปรากฏขึ้นภายใต้ Folder src/app

เช่นสร้าง try-page Component

ng generate component components/try-page

หากสามารถสร้างได้ ก็จะขึ้นว่า CREATE และ Update Import app.module.ts ให้อัตโนมัติ

สังเกต: จะมี Folder components ถูกสร้างขึ้นก่อนตามด้วย Folder try-page

และที่ไฟล์ app.module.ts จะมีการ Import Component ที่ถูกสร้างใหม่ที่ declarations (หากไม่ Import จะไม่สามารถเรียกใช้งาน Component ภายใน App ได้เลย)

โดยการสร้าง Component แบบปกติจะประกอบไปด้วย 4 ไฟล์หลัก คือ

.html ใช้กำหนดการแสดงผล HTML
.scss ใช้กำหนด style ที่จะใช้กับ Component นั้น ๆ เท่านั้น
.spec.ts ใช้ทำการทดสอบ (ไม่ได้ใช้หากไม่เทส)
.ts ใช้เก็บตัวแปรและฟังก์ชันที่ใช้กับ Component

โดยหลัก ๆ เราจะยุ่งกับไฟล์ HTML , TS และ SCSS เป็นหลัก

โดยเนื้อหาในไฟล์ HTML ที่ถูกสร้างขึ้นจะมี

<p>[ชื่อ component] works!</p>

และในไฟล์ .ts จะมี

import { Component } from '@angular/core';
@Component({
selector: 'app-<ชื่อ Component>',
standalone: false,
templateUrl: './ <ชื่อ Component>.html',
styleUrl: './<ชื่อ Component>.scss',
})
export class <ชื่อ Component> {
}

Angular ใช้ Class เป็นหัวใจหลักในการจัดการ component ตัว Class จะเป็นที่เก็บ ตัวแปร (properties) และ ฟังก์ชัน (methods) ที่ใช้ใน template (HTML)

ใน Class ควรประกาศ Constructor ซึ่งจะทำงานทันทีที่ Component นั้น ๆ ถูกเรียกใช้ และนอกจากนี้หาก Import Service ก็จะต้องเรียกใช้ที่ Constructor ก่อนอยู่ดี ซึ่งหากไม่ใช้งาน จะประกาศทิ้งไว้ก็ได้

export class <ชื่อ Component> {   constructor() { } }

ตัวอย่างการใช้งาน Constructor

ประกาศเรียกใช้ HttpClient ในตัวแปร http และ เรียก Method loadInital() เมื่อ Component ถูกโหลด

การประกาศตัวแปร

ตัวแปรใน Class จะสามารถนำไปใช้ใน HTML ได้โดยตรง โดยถ้าอยากให้สวยงามตัวแปรควรอยู่ด้านบนของไฟล์ ใต้ export class

วิธีการเรียกใช้ตัวแปรบน HTML ใช้ Interpolation ( {{ }} ) เพื่อดึงค่าไปแสดงผล

การสร้าง Method (Function)

ฟังก์ชันที่ประกาศใน Class สามารถเรียกจาก template ได้ โดยหากจะใช้ตัวแปรที่ประกาศไว้ก่อนหน้านี้ให้ใช้ this. ตามหลักของ OOP

HTML เรียกผ่าน event binding ( (click) )

การใช้งาน Selector

ใน Angular เมื่อเราสร้าง Component แล้วนั้นในไฟล์ .ts จะมีการกำหนด Selector เพื่อให้สามารถเรียกใช้ที่อื่นได้ โดยจะใช้หรือไม่ก็ได้ (ในกรณีที่เป็นหน้าหลักจะไม่ได้ใช้)

ตัวอย่าง เช่นสร้างเป็น Header กับ Footer จะต้องใช้แน่นอนเพื่อประกอบส่วน header body footer เข้าด้วยกัน โดยวิธีใช้ สามารถนำไปประกาศใน html ได้เลย เช่นใน sample-components จะมี home ซึ่งใน home จะมีการเรียก header และ footer มา

ไฟล์ template/header/header.component.ts

ไฟล์ template/footer/footer.component.ts

โดยชื่อของ selector สามารถกำหนดเองได้ โดยห้ามซ้ำ กับ selector อื่น ๆ ที่มีอยู่แล้ว

ไฟล์ home.component.ts

ผลลัพธ์

Data binding

Component ที่เราสร้างมานั้นสามารถส่งตัวแปรจาก Component แม่ไปยังลูกได้ โดยสามารถ parse ผ่าน HTML จุดที่เรียก component ตรง ๆ ได้เลย และวิธีการรับค่าให้ใช้ @Input() ชื่อตัวแปร ในการรับ

Two-way binding

นอกจากการส่งตัวแปรไป ยังสามารถทำให้ตัวแปรที่ Component แม่ปรับตาม Component ลูกได้ด้วย ผ่านการทำ Two-way binding โดยจุดที่แตกต่างกันคือ Two-way binding จะต้องทำ emit ด้วย

ตัวอย่างการใช้งาน

Component แม่

ไฟล์ .ts