reveal.js

# Angular Pipes: built-in (date, currency, async) และ Custom Pipe

Lesson 6 - Angular Service, DI และการเชื่อมต่อ API

**Pipe** คือเครื่องมือสำหรับแปลงค่าก่อนแสดงผลใน Template เช่น แปลงวันที่ สกุลเงิน ตัวเลข ตัวอักษร หรือ subscribe Observable ผ่าน `async` pipe โดยไม่ต้องเขียน subscribe ใน Component เอง

---

## 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["ยุค Format ใน Component / Manual Format"]
 A["formatDate() เขียน method เอง"]
 end
 subgraph Era2["ยุค Built-in Pipes / Angular Pipes"]
 B["date/currency/number แปลงค่ามาตรฐาน"]
 C["uppercase/json ช่วยแสดงผล"]
 end
 subgraph Era3["ยุค Reactive Template / Async Pipe"]
 D["async pipe subscribe อัตโนมัติ"]
 E["Custom Pipe กติกาเฉพาะระบบ"]
 end
 A --> B --> C --> D --> E
</pre>

---

## Built-in Pipes ที่ใช้บ่อย

- **date** ใช้ `{{ today | date:'dd/MM/yyyy' }}` หรือ `'short'`, `'medium'`, `'long'`
- **currency** ใช้ `{{ price | currency:'THB':'symbol':'1.2-2' }}`
- **number** ใช้ `{{ value | number:'1.0-2' }}`
- **uppercase, lowercase, titlecase** ใช้แปลงตัวอักษร
- **json** ใช้ `{{ obj | json }}` เพื่อ Debug Object
- **async** ใช้ `{{ data$ | async }}` เพื่อ Subscribe Observable ใน Template อัตโนมัติ
- **Custom Pipe** ใช้ `@Pipe({ name: 'thaiDate' })` และ `PipeTransform`

---

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

| Pipe | Input | Output | เหมาะกับ |
|---|---|---|---|
| `date` | Date/String | วันที่จัดรูปแบบ | วันที่สร้าง/แก้ไข |
| `currency` | number | เงินพร้อมสกุล | ราคา |
| `number` | number | ตัวเลขจัดรูปแบบ | คะแนน/ยอดรวม |
| `json` | object | JSON string | Debug |
| `async` | Observable/Promise | ค่าล่าสุด | Stream ใน Template |
| Custom Pipe | ใด ๆ | ตามที่กำหนด | Logic เฉพาะระบบ |

---

## Mermaid Diagram: Pipe Flow

---

## สมการคณิตศาสตร์: จำนวนการแปลงค่าใน Template

- **P** คือจำนวน Pipe ที่ใช้ทั้งหมด
- **b** คือจำนวน Built-in Pipe
- **c** คือจำนวน Custom Pipe
- **a** คือจำนวน async pipe ที่ใช้กับ Observable หรือ Promise

---

## Code Example

```typescript
// thai-date.pipe.ts
// Custom Pipe สำหรับแสดงวันที่แบบไทยอย่างง่าย
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thaiDate'
})
export class ThaiDatePipe implements PipeTransform {
  transform(value: Date | string): string {
    const date = new Date(value);
    const day = date.getDate().toString().padStart(2, '0');
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const year = date.getFullYear() + 543;
    return `${day}/${month}/${year}`;
  }
}

// ตัวอย่างการใช้งาน:
// {{ today | thaiDate }}
```

```typescript
// dashboard.component.ts
// Component เตรียมข้อมูลให้ Template ใช้ built-in pipes
import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
 selector: 'app-dashboard',
 template: `
 วันที่: {{ today | date:'dd/MM/yyyy' }}
 ราคา: {{ price | currency:'THB':'symbol':'1.2-2' }}
 ชื่อ: {{ name | titlecase }}
 ข้อมูล async: {{ message$ | async }}
 <pre>{{ debugData | json }}</pre>
 `
})
export class DashboardComponent {
 today = new Date();
 price = 1299.5;
 name = 'web programming';
 message$ = of('โหลดข้อมูลสำเร็จ');
 debugData = { week: 8, topic: 'Angular Pipes' };
}

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

---

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

1. ใช้ `date`, `currency`, `number` ใน Template
2. ใช้ `async` pipe กับ Observable
3. สร้าง Custom Pipe ชื่อ `thaiDate`
4. ทดลองแสดงปี พ.ศ. จากวันที่ปัจจุบัน

---

## End

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