Pipes — CompileDaily Study

Penjelasan

Pipe mentransformasi data langsung di template lewat operator | (mis. {{ tanggal | date }}, {{ harga | currency }}) — Angular punya banyak pipe bawaan (date, currency, uppercase, json, dst). Pipe custom dibuat lewat decorator @Pipe dan mengimplementasikan interface PipeTransform.

Contoh Konsep

// terbilang.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'terbilangRupiah',
    standalone: true,
})
export class TerbilangRupiahPipe implements PipeTransform {
    transform(nilai: number): string {
        return `Rp ${nilai.toLocaleString('id-ID')}`;
    }
}

// Dipakai di template (component wajib import pipe-nya di array imports):
// <p>{{ harga | terbilangRupiah }}</p>

Praktikum

Buat pipe custom bernama singkatTeksPipe yang menerima teks dan memotongnya jadi maksimal 20 karakter, menambahkan "..." di akhir kalau lebih panjang dari itu. Tulis contoh pemakaiannya di template dengan operator |.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Pipe custom (standalone: true) WAJIB diimpor ke array imports component yang memakainya, persis seperti standalone component lain — lupa mengimpornya membuat Angular error "pipe not found" walau nama pipe-nya sudah benar ditulis di template.