Angular Pipe: สร้าง Custom Pipe และใช้ Built-in Pipes

Pipe คืออะไร

Pipe ใน Angular ใช้สำหรับ transform ข้อมูลใน template เช่น format วันที่, ตัวเลข, หรือแปลงข้อความ

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

<!-- DatePipe -->
<p>{{ today | date:'dd/MM/yyyy' }}</p>
<p>{{ today | date:'short' }}</p>

<!-- CurrencyPipe -->
<p>{{ price | currency:'THB':'symbol':'1.2-2' }}</p>

<!-- DecimalPipe -->
<p>{{ 1234567.89 | number:'1.2-2' }}</p>

<!-- UpperCase / LowerCase -->
<p>{{ name | uppercase }}</p>
<p>{{ name | lowercase }}</p>

<!-- SlicePipe -->
<p>{{ longText | slice:0:100 }}...</p>

<!-- JsonPipe (debug) -->
<pre>{{ data | json }}</pre>

<!-- AsyncPipe -->
<p>{{ user$ | async }}</p>

สร้าง Custom Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thaiDate',
  standalone: true
})
export class ThaiDatePipe implements PipeTransform {
  transform(value: Date | string): string {
    const date = new Date(value);
    return date.toLocaleDateString('th-TH', {
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    });
  }
}

<p>{{ article.createdAt | thaiDate }}</p>
<!-- ผลลัพธ์: 13 เมษายน 2569 -->

Pipe กับ Parameter

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 100, suffix: string = '...'): string {
    if (value.length <= limit) return value;
    return value.slice(0, limit) + suffix;
  }
}

<p>{{ description | truncate:50:'...' }}</p>

Pure vs Impure Pipe

// Pure (default) - รันเฉพาะเมื่อ input เปลี่ยน
@Pipe({ name: 'filter', pure: true })

// Impure - รันทุก change detection cycle (ระวัง performance)
@Pipe({ name: 'filter', pure: false })

สรุป

Pipe ช่วยให้ template สะอาดขึ้น ไม่ต้องเขียน logic การ format ใน component ควรใช้ Built-in Pipes ก่อน ถ้าไม่พอค่อยสร้าง Custom Pipe ครับ