Menggunakan Pipe Bawaan
Format tanggal, angka, dan teks dengan pipe.
Menggunakan Pipe Bawaan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu Pipe?
Pipe mengubah data langsung dalam templat untuk ditampilkan. Anda menulis sebuah nilai, karakter pipe |, lalu nama pipe.
Pipe sangat berguna untuk memformat tanggal, angka, mata uang, dan teks tanpa menulis logika komponen tambahan.
Sintaks Pipe
Bentuk dasarnya adalah {{ value | pipeName }}. Angular meneruskan nilai ke pipe dan menampilkan hasil yang telah diubah.
<!-- template -->
<p>{{ "hello" | uppercase }}</p>
<!-- renders: HELLO -->Pipe uppercase dan lowercase
uppercase dan lowercase mengubah kapitalisasi string. Keduanya sederhana dan umum digunakan untuk label serta judul.
@Component({
selector: "app-demo",
template: "<p>{{ name | uppercase }}</p>"
})
export class DemoComponent {
name = "angular";
}
// renders: ANGULARPipe date
Pipe date memformat objek Date atau penanda waktu menjadi string yang mudah dibaca. Secara bawaan, pipe ini menggunakan format tanggal sedang.
<p>{{ today | date }}</p>
<!-- e.g. May 30, 2026 -->
// component
today = new Date();Memformat Tanggal
Anda dapat meneruskan string format ke pipe date, seperti "shortDate", "fullDate", atau pola khusus seperti "yyyy-MM-dd".
<p>{{ today | date:"yyyy-MM-dd" }}</p>
<!-- e.g. 2026-05-30 -->
<p>{{ today | date:"shortTime" }}</p>
<!-- e.g. 2:30 PM -->Pipe currency
Pipe currency memformat angka sebagai uang. Secara bawaan, pipe ini menggunakan USD, tetapi Anda dapat meneruskan kode mata uang.
<p>{{ price | currency }}</p>
<!-- $42.50 -->
<p>{{ price | currency:"EUR" }}</p>
<!-- €42.50 -->
// component
price = 42.5;Pipe number dan percent
Pipe number memformat angka dengan opsi digit, sedangkan percent menampilkan nilai sebagai persentase.
<p>{{ 3.14159 | number:"1.0-2" }}</p>
<!-- 3.14 -->
<p>{{ 0.25 | percent }}</p>
<!-- 25% -->Memahami digitsInfo
Pipe number menerima string digitsInfo: minIntegerDigits.minFractionDigits-maxFractionDigits. Misalnya, "1.2-2" selalu menampilkan tepat dua angka desimal.
<p>{{ 7 | number:"1.2-2" }}</p>
<!-- 7.00 -->
<p>{{ 1234.5 | number:"1.0-0" }}</p>
<!-- 1,235 -->Pipe json
Pipe json membuat serialisasi objek apa pun menjadi string JSON. Pipe ini terutama digunakan untuk men-debug templat agar Anda dapat melihat bentuk data.
<pre>{{ user | json }}</pre>
<!-- { "id": 1, "name": "Ada" } -->
// component
user = { id: 1, name: "Ada" };Pipe slice
Pipe slice mengembalikan sebagian dari array atau string, serupa dengan slice pada JavaScript. Pipe ini berguna untuk memotong daftar.
<p>{{ "Angular" | slice:0:4 }}</p>
<!-- Angu -->
<li *ngFor="let item of items | slice:0:3">{{ item }}</li>Mengimpor Pipe dalam Komponen Mandiri
Dalam komponen mandiri, Anda harus mengimpor pipe yang digunakan, misalnya DatePipe atau CurrencyPipe, dari @angular/common.
import { DatePipe, CurrencyPipe } from "@angular/common";
@Component({
selector: "app-demo",
standalone: true,
imports: [DatePipe, CurrencyPipe],
template: "<p>{{ today | date }}</p>"
})
export class DemoComponent {
today = new Date();
}Pemeriksaan Cepat
Uji pemahaman Anda tentang pipe bawaan.
Ringkasan
Anda telah mempelajari pipe bawaan inti: uppercase, lowercase, date, currency, number, percent, json, dan slice.
Pipe menjaga pemformatan tetap berada di templat secara rapi dan deklaratif. Berikutnya, Anda akan merangkai pipe dan meneruskan argumen kepadanya.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menggunakan Pipe Bawaan” gratis?
Ya — teks lengkap “Menggunakan Pipe Bawaan” 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 “Menggunakan Pipe Bawaan”?
Format tanggal, angka, dan teks dengan pipe. 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 1 dari 4.
Berapa lama pelajaran “Menggunakan Pipe Bawaan” 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