reveal.js

# Data Binding: Interpolation {{}}, Property [], Event (), Two-way [()]

Lesson 4 - Angular พื้นฐานและโครงสร้างโปรเจกต์

**Data Binding** คือการเชื่อมข้อมูลระหว่าง Class ของ Component กับ Template ทำให้ UI แสดงข้อมูลและตอบสนองต่อการกระทำของผู้ใช้ได้อย่างเป็นระบบ

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค DOM Manual / Manual Update"]
    A["querySelector + innerHTML<br/>อัปเดตเอง"]
  end
  subgraph Era2["ยุค Template Binding / Binding Era"]
    B["Interpolation<br/>แสดงค่า"]
    C["Property/Event Binding<br/>รับส่งค่า"]
  end
  subgraph Era3["ยุค Reactive UI / Reactive Era"]
    D["Two-way Binding<br/>ฟอร์มโต้ตอบ"]
    E["Change Detection<br/>อัปเดต UI อัตโนมัติ"]
  end
  A --> B --> C --> D --> E
</pre>

---

## ประเภทของ Data Binding

- **Interpolation** ใช้ `{{ expression }}` เพื่อแสดงค่าตัวแปรใน Template
- **Property Binding** ใช้ `[src]="imageUrl"` เพื่อผูก Property ของ HTML กับตัวแปร
- **Event Binding** ใช้ `(click)="handleClick($event)"` เพื่อผูก Event กับ Method
- **Two-way Binding** ใช้ `[(ngModel)]="username"` และต้อง import `FormsModule`
- **Class Binding** ใช้ `[class.active]="isActive"` หรือ `[ngClass]`
- **Style Binding** ใช้ `[style.color]="color"` หรือ `[ngStyle]`

---

## ตารางเปรียบเทียบ Binding

| ประเภท | Syntax | ทิศทางข้อมูล | ตัวอย่าง |
|---|---|---|---|
| Interpolation | `{{ title }}` | Class ไป Template | แสดงข้อความ |
| Property | `[src]="imageUrl"` | Class ไป DOM Property | รูปภาพ |
| Event | `(click)="save()"` | Template ไป Class | ปุ่มคลิก |
| Two-way | `[(ngModel)]="name"` | สองทิศทาง | ฟอร์ม |
| Class | `[class.active]="ok"` | Class ไป CSS Class | สถานะ active |
| Style | `[style.color]="color"` | Class ไป Inline Style | สีข้อความ |

---

## Mermaid Diagram: Data Flow

---

## สมการคณิตศาสตร์: จำนวน Binding ในหน้า

- **B** คือจำนวน Binding ทั้งหมดใน Template
- **B_i** คือจำนวน Interpolation
- **B_p** คือจำนวน Property Binding
- **B_e** คือจำนวน Event Binding
- **B_t** คือจำนวน Two-way Binding

---

## Code Example

```typescript
// profile.component.ts
// Component นี้แสดงตัวอย่าง Binding หลายรูปแบบ
import { Component } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {
  username = 'student';
  imageUrl = 'assets/profile.png';
  isActive = true;
  textColor = '#2563eb';

// Event handler เมื่อผู้ใช้กดปุ่ม
  toggleActive(): void {
    this.isActive = !this.isActive;
  }
}

// ตัวอย่างการใช้งาน:
// ต้อง import FormsModule หากใช้ [(ngModel)]
// <app-profile></app-profile>
```

```html

<h2>สวัสดี {{ username }}</h2>

<p [class.active]="isActive" [style.color]="textColor">
  สถานะ: {{ isActive ? 'Active' : 'Inactive' }}
</p>

<button type="button" (click)="toggleActive()">Toggle Status</button>
```

---

## กิจกรรมท้ายบท

- สร้างฟอร์มรับชื่อผู้เรียนด้วย `[(ngModel)]`
- แสดงชื่อด้วย Interpolation
- เปลี่ยน class ของข้อความตามสถานะ `isActive`

---

## End

<a href="/web-programming/07-angular-basic/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>