reveal.js

# Component: @Component decorator, template, styles, selector

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

**Component** คือหน่วยหลักของ UI ใน Angular ประกอบด้วย Class, Template, Style และ Metadata จาก **`@Component` decorator** เพื่อบอก Angular ว่า Component นี้ใช้ selector ใดและมีหน้าตาอย่างไร

---

## 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["ยุคหน้าเดียว / Page Script"]
    A["HTML + JS ปนกัน<br/>Hard to Reuse"]
  end
  subgraph Era2["ยุค Component / Component Model"]
    B["แยก UI เป็นชิ้น<br/>Reusable Component"]
    C["@Component Metadata<br/>ประกาศ selector/template/style"]
  end
  subgraph Era3["ยุคออกแบบระบบ / Design System"]
    D["Nested Components<br/>ประกอบเป็นหน้าจอ"]
    E["Shared Components<br/>ใช้ซ้ำทั้งระบบ"]
  end
  A --> B --> C --> D --> E
</pre>

---

## ส่วนประกอบของ `@Component`

- **`selector`** เช่น `'app-header'` ใช้ใน Template เป็น `<app-header>`
- **`templateUrl`** ชี้ไปยังไฟล์ HTML ภายนอก
- **`styleUrls`** ชี้ไปยังไฟล์ CSS ภายนอก
- **Inline Template** ใช้ `template: '<h1>Hello</h1>'`
- **Inline Styles** ใช้ `styles: ['h1 { color: red; }']`
- **ViewEncapsulation** มี `Emulated`, `ShadowDom`, `None`
- **Nested Components** คือการวาง Component หนึ่งไว้ใน Template ของอีก Component

---

## ตารางเปรียบเทียบ Template และ Style

| วิธีเขียน | ตัวอย่าง | เหมาะกับ |
|---|---|---|
| `templateUrl` | `templateUrl: './header.html'` | Component ที่มี HTML หลายบรรทัด |
| `template` | `template: '<h1>Hello</h1>'` | Component ขนาดเล็ก |
| `styleUrls` | `styleUrls: ['./header.css']` | CSS ที่ต้องดูแลแยก |
| `styles` | `styles: ['h1 { color:red }']` | Style สั้น ๆ เฉพาะจุด |

---

## Mermaid Diagram: Anatomy ของ Component

<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 TD
  A["@Component<br/>Metadata"] --> B["selector<br/>ชื่อเรียกใน HTML"]
  A --> C["template/templateUrl<br/>โครงสร้าง UI"]
  A --> D["styles/styleUrls<br/>รูปแบบ CSS"]
  A --> E["class<br/>ข้อมูลและ method"]
  E --> F["Template Binding<br/>เชื่อมข้อมูลกับ UI"]
</pre>

---

## สมการคณิตศาสตร์: การประกอบหน้าจอจาก Component

- **U** คือหน้าจอผู้ใช้ทั้งหมด
- **n** คือจำนวน Component
- **C_i** คือ Component ลำดับที่ i ที่นำมาประกอบเป็น UI

---

## Code Example

```typescript
// lesson-card.component.ts
// Component สำหรับแสดงข้อมูลบทเรียน 1 รายการ
import { Component } from '@angular/core';

@Component({
  selector: 'app-lesson-card',
  templateUrl: './lesson-card.component.html',
  styleUrls: ['./lesson-card.component.css']
})
export class LessonCardComponent {
  title = 'Angular Component';
  description = 'เรียนรู้การสร้าง Component และการใช้ selector';

// method สำหรับเปลี่ยนชื่อบทเรียน
  updateTitle(): void {
    this.title = 'Updated Angular Component';
  }
}

// ตัวอย่างการใช้งาน:
// <app-lesson-card></app-lesson-card>
```

```html

<article class="lesson-card">
  <h2>{{ title }}</h2>
  <p>{{ description }}</p>
  <button type="button" (click)="updateTitle()">Update</button>
</article>
```

```css
/* lesson-card.component.css */
.lesson-card {
  border: 1px solid #ddd;
  padding: 16px;
}
```

---

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

1. สร้าง Component ชื่อ `course-header`
2. กำหนด selector เป็น `app-course-header`
3. แสดงชื่อรายวิชาและคำอธิบายสั้น ๆ
4. เรียกใช้ Component นี้ในหน้า `app.component.html`

---

## 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>