0Pricing
Angular Academy · Pelajaran

Membuat Pipe Kustom

Bangun pipe transformasi yang dapat digunakan kembali.

Membuat Pipe Kustom adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Pipe Khusus?

Jika pipe bawaan tidak mencukupi, Anda dapat membuat pipe khusus untuk merangkum logika transformasi yang dapat digunakan kembali dalam templat.

Dekorator @Pipe

Pipe adalah kelas yang dihiasi dengan @Pipe. Properti name adalah nama yang Anda gunakan dalam templat.

import { Pipe } from "@angular/core";

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe {}

Menerapkan PipeTransform

Kelas pipe menerapkan antarmuka PipeTransform, yang mengharuskan adanya satu metode transform.

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

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string): string {
    return value + "!";
  }
}

Metode transform

Parameter pertama transform adalah nilai yang diteruskan melalui pipe. Apa pun yang Anda kembalikan akan menjadi keluaran yang dirender.

transform(value: string): string {
  return value.trim();
}

Menggunakan Pipe Anda

Impor pipe ke dalam komponen mandiri, lalu gunakan namanya di templat seperti saat menggunakan pipe bawaan.

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [ExclaimPipe],
  template: "<p>{{ 'hi' | exclaim }}</p>"
})
export class DemoComponent {}
// renders: hi!

Menerima Argumen

Parameter tambahan setelah value menjadi argumen pipe. Pemanggil meneruskannya dengan tanda titik dua.

@Pipe({ name: "repeat", standalone: true })
export class RepeatPipe implements PipeTransform {
  transform(value: string, times: number): string {
    return value.repeat(times);
  }
}
// {{ "ab" | repeat:3 }} -> ababab

Nilai Argumen Bawaan

Berikan nilai bawaan pada argumen agar pemanggil dapat mengabaikannya. Dengan begitu, pipe Anda tetap fleksibel.

transform(value: string, times: number = 2): string {
  return value.repeat(times);
}
// {{ "ab" | repeat }} -> abab

Menangani Null dan Undefined

Selalu tangani kemungkinan masukan yang tidak tersedia. Kembalikan cadangan yang sesuai ketika nilainya null atau undefined.

transform(value: string | null): string {
  if (value == null) return "";
  return value.toUpperCase();
}

Contoh Pipe Pemotong Teks

Berikut adalah pipe praktis yang memendekkan teks panjang dan menambahkan elipsis.

@Pipe({ name: "truncate", standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return "";
    return value.length > limit
      ? value.slice(0, limit) + "..."
      : value;
  }
}

Menentukan Tipe Nilai Kembalian

Anotasikan tipe kembalian agar TypeScript dan templat Anda tetap aman secara tipe. Pipe dapat mengembalikan tipe apa pun, bukan hanya string.

@Pipe({ name: "double", standalone: true })
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Mendaftarkan dalam Modul (NgModule)

Jika Anda menggunakan NgModules, bukan komponen mandiri, deklarasikan pipe dalam declarations dan ekspor jika diperlukan.

@NgModule({
  declarations: [TruncatePipe],
  exports: [TruncatePipe]
})
export class SharedModule {}

Pemeriksaan Singkat

Uji pemahaman Anda tentang pipe khusus.

Ringkasan

Anda telah membuat pipe khusus dengan @Pipe dan PipeTransform, menerima argumen dengan nilai bawaan, menangani nilai null, serta mendaftarkannya dalam komponen mandiri atau NgModules.

Selanjutnya, Anda akan mempelajari pipe murni dan tidak murni.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Membuat Pipe Kustom” gratis?

Ya — teks lengkap “Membuat Pipe Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Membuat Pipe Kustom”?

Bangun pipe transformasi yang dapat digunakan kembali. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Membuat Pipe Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menggunakan Pipe Bawaan
  2. Merangkai dan Memberi Parameter pada Pipe
  3. Membuat Pipe Kustom
  4. Pipe Pure vs Impure
← Kembali ke Angular Academy