Merangkai dan Memberi Parameter pada Pipe
Gabungkan pipe dan teruskan argumen.
Merangkai dan Memberi Parameter pada Pipe adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Meneruskan Argumen ke Pipe
Pipe dapat menerima argumen setelah tanda titik dua. Bentuknya adalah {{ value | pipeName:arg1:arg2 }}. Setiap argumen dipisahkan dengan tanda titik dua tersendiri.
Satu Argumen
Banyak pipe menerima satu argumen. Misalnya, pipe date menerima string format.
<p>{{ today | date:"fullDate" }}</p>
<!-- Saturday, May 30, 2026 -->Beberapa Argumen
Pipe slice menerima indeks awal dan akhir, yang masing-masing diteruskan dengan tanda titik dua tersendiri.
<p>{{ text | slice:0:10 }}</p>
<!-- first 10 characters -->Argumen Dinamis
Argumen dapat berupa properti komponen, bukan hanya literal. Dengan begitu, Anda dapat mengubah perilaku pipe secara reaktif.
<p>{{ price | currency:currencyCode }}</p>
// component
currencyCode = "GBP";
price = 99;Apa Itu Perantaian Pipe?
Anda dapat merantai pipe sehingga keluaran dari satu pipe menjadi masukan untuk pipe berikutnya. Pipe dijalankan dari kiri ke kanan.
<p>{{ name | slice:0:5 | uppercase }}</p>
<!-- slices first, then uppercases -->Contoh Perantaian
Di sini, tanggal diformat lalu diubah menjadi huruf besar. Pipe date dijalankan terlebih dahulu, kemudian uppercase.
<p>{{ today | date:"fullDate" | uppercase }}</p>
<!-- SATURDAY, MAY 30, 2026 -->Urutan Itu Penting
Urutan pipe yang dirantai mengubah hasilnya. Menerapkan uppercase sebelum slice atau sesudahnya menghasilkan teks yang sama di sini, tetapi pada pipe yang melakukan transformasi, urutan dapat sangat berpengaruh.
<!-- uppercase then slice -->
{{ "angular" | uppercase | slice:0:3 }}
<!-- ANG -->
<!-- slice then uppercase -->
{{ "angular" | slice:0:3 | uppercase }}
<!-- ANG -->Menggabungkan Argumen dan Perantaian
Anda dapat menggabungkan argumen dan perantaian dengan bebas. Setiap pipe tetap menerima keluaran pipe sebelumnya sebagai nilainya.
<p>{{ amount | number:"1.2-2" | slice:0:6 }}</p>Perantaian dengan Mata Uang
Format angka sebagai mata uang, lalu hapus spasi di sekitarnya. Meskipun tidak umum, hal ini menunjukkan bahwa pipe dapat digunakan sebagai blok pembangun yang dapat dikomposisikan.
<p>{{ price | currency:"USD" }}</p>
<!-- $1,234.56 -->Kiat Keterbacaan
Perantaian pipe yang panjang dapat mengurangi keterbacaan. Jika perantaian menjadi rumit, pertimbangkan untuk menghitung nilainya di dalam komponen atau menggunakan pipe khusus.
// instead of a long template chain,
// compute in the component:
get displayName(): string {
return this.name.slice(0, 5).toUpperCase();
}Spasi di Sekitar Pipe
Spasi di sekitar | dan : bersifat opsional, tetapi disarankan demi keterbacaan. Angular mengabaikan spasi tambahan.
<p>{{ value | date : "short" }}</p>
<!-- equivalent to value|date:"short" -->Pemeriksaan Singkat
Uji pemahaman Anda tentang argumen dan perantaian pipe.
Ringkasan
Anda telah mempelajari cara meneruskan satu atau beberapa argumen dengan tanda titik dua, menggunakan argumen dinamis dari properti komponen, dan merantai pipe sehingga keluaran mengalir dari kiri ke kanan.
Selanjutnya, Anda akan membuat pipe khusus sendiri.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Merangkai dan Memberi Parameter pada Pipe” gratis?
Ya — teks lengkap “Merangkai dan Memberi Parameter pada Pipe” 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 “Merangkai dan Memberi Parameter pada Pipe”?
Gabungkan pipe dan teruskan argumen. 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 2 dari 4.
Berapa lama pelajaran “Merangkai dan Memberi Parameter pada Pipe” 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
- Menggunakan Pipe Bawaan
- Merangkai dan Memberi Parameter pada Pipe
- Membuat Pipe Kustom
- Pipe Pure vs Impure