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

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

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

%%{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

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

Mermaid Diagram: Pipe Flow

%%{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
  A["Raw Value
ค่าดิบ"] --> B["Pipe
แปลงค่า"]
  B --> C["Formatted Value
ค่าพร้อมแสดงผล"]
  C --> D["Template
หน้าจอผู้ใช้"]

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

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

Code Example

// 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 }}

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

@Component({
  selector: 'app-dashboard',
  template: `
    <p>วันที่: {{ today | date:'dd/MM/yyyy' }}</p>
    <p>ราคา: {{ price | currency:'THB':'symbol':'1.2-2' }}</p>
    <p>ชื่อ: {{ name | titlecase }}</p>
    <p>ข้อมูล async: {{ message$ | async }}</p>
    <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. ทดลองแสดงปี พ.ศ. จากวันที่ปัจจุบัน

กลับสัปดาห์ที่ 8