Panduan Lengkap untuk Pipa di Angular

Pipa di Angular memungkinkan pengguna mengubah data sebelum ditampilkan di tampilan. Pipa mirip dengan filter dalam bahasa pemrograman lain tetapi lebih fleksibel dan dapat disesuaikan untuk memenuhi kebutuhan tertentu. Di sini, Anda akan menjelajahi cara menggunakan pipa di aplikasi Angular Anda.

Apa Itu Pipa di Sudut?

Pipa sudut adalah transformator data yang membuat aplikasi Anda lebih dinamis. Mereka mengambil nilai sebagai input dan mengembalikan nilai yang diubah sebagai output. Transformasi data bisa sesederhana memformat tanggal, atau mata uang, atau serumit memfilter atau menyortir daftar item.

Anda bisa menggunakan pipa dalam komponen Angular Anda dan template Anda. Pipa mudah digunakan, dan Anda dapat merangkainya untuk membuat transformasi yang lebih kompleks.

Angular menyediakan beberapa pipa built-in termasuk DatePipe, Pipa Huruf Besar, Pipa Huruf Kecil, CurrencyPipe, Pipa Desimal, PersenPipe

, JsonPipe, SlicePipe, Dan AsyncPipe. Ini juga menyediakan fungsionalitas untuk membuat pipa khusus.

Setiap pipa Angular bawaan melakukan fungsi unik dan dapat membantu Anda mengubah data.

DatePipe

Itu DatePipe format dan tampilan variabel tanggal dan waktu Anda dalam format tertentu, mengingat lokal Anda. Berbeda dengan framework lain yang membutuhkan Paket JavaScript untuk memformat tanggal dan waktu, Sudut menggunakan DatePipe. Menggunakan DatePipe dalam aplikasi Anda, tambahkan simbol pipa (|) diikuti dengan tanggal dan parameter tambahan apa pun.

Misalnya:

<p>Today's date is {{ currentDate | date }}p>

Dalam contoh ini, Anda lulus tanggal sekarang variabel melalui DatePipe, yang kemudian memformatnya sesuai dengan format tanggal default. Anda mendefinisikan tanggal sekarang variabel dalam file TypeScript komponen Anda.

Ini contohnya:

import { Component } from'@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
exportclass AppComponent {
 currentDate: any = newDate();
}

Anda juga dapat memberikan parameter tambahan ke DatePipe untuk menyesuaikan output:

<p>Today's date is {{ currentDate | date:'shortDate' }}p>

Blok kode di atas melewati kencan singkat parameter ke DatePipe. Ini memberitahu DatePipe untuk memformat tanggal menggunakan format tanggal pendek. Di samping kencan singkat parameter, Anda dapat mengkonfigurasi DatePipe menggunakan berbagai parameter, antara lain z, longDate, dan format tanggal khusus seperti dd/MM/YY.

Pipa Huruf Besar dan Pipa Huruf Kecil

Itu Pipa Huruf Besar Dan Pipa Huruf Kecil mengubah teks Anda. Anda mengubah teks Anda menjadi huruf besar menggunakan Pipa Huruf Besar dan huruf kecil menggunakan Pipa Huruf Kecil.

Untuk menggunakan Pipa Huruf Besar Dan Pipa Huruf Kecil, tambahkan simbol pipa (|) diikuti dengan huruf kecil untuk menggunakan Pipa Huruf Kecil atau huruf besar untuk menggunakan Pipa Huruf Besar.

Di bawah ini adalah contoh cara menggunakan Pipa Huruf Besar Dan Pipa Huruf Kecil:

<p>{{ message | uppercase}}p>
<p>{{ message | lowercase}}p>

CurrencyPipe

Menggunakan CurrencyPipe, Anda dapat memformat angka menjadi mata uang di aplikasi Anda. Itu CurrencyPipe memformat angka sesuai dengan lokal Anda. Untuk memformat nomor Anda menggunakan CurrencyPipe, gunakan simbol pipa diikuti dengan mata uang.

Misalnya:

<p>{{ number | currency }}p>

Dalam contoh ini, CurrencyPipe mengubah variabel angka menjadi mata uang. Secara default, CurrencyPipe mengkonversi variabel ke dolar. Untuk mengubahnya, Anda dapat mengonfigurasi CurrencyPipe untuk mengkonversi ke mata uang lain dengan melewati parameter tambahan.

Ini contohnya:

<p>{{ number | currency: 'GBP' }}p>

Di sini, Anda melewati GBP parameter ke CurrencyPipe. Hal ini memastikan bahwa nomor konversi variabel ke mata uang Great Britain Pound.

DecimalPipe dan PercentPipe

Itu Pipa Desimal mengubah nomor Anda menjadi desimal, sedangkan PersenPipe mengubah angka Anda menjadi persentase.

Untuk menggunakan Pipa Desimal, gunakan simbol pipa diikuti dengan nomor dan parameter tambahan. Untuk menggunakan PersenPipe, lakukan hal yang sama tetapi ganti nomor dengan persen tanpa parameter tambahan.

Misalnya:

<p>{{ number | number: '1.2-3' }}p>
<p>{{ number | percent }}p>

Parameter tambahan diteruskan ke Pipa Desimal mengontrol jumlah digit bilangan bulat dan pecahan yang ditampilkan. Itu 1 parameter menentukan bahwa harus ada setidaknya satu digit bilangan bulat. Sebagai perbandingan, 2.3 parameter menetapkan bahwa setidaknya harus ada dua dan hingga tiga digit pecahan.

JsonPipe

Itu JsonPipe adalah pipa bawaan yang mengubah data menjadi format string JSON. Ini terutama digunakan untuk tujuan debugging. Anda dapat menggunakan JsonPipe pada kedua objek dan array.

Sintaks untuk menggunakan the JsonPipe adalah sebagai berikut:

{{ expression | json }}

Di Sini, ekspresi adalah data yang ingin Anda ubah menjadi format JSON. Operator pipa (|) menerapkan the JsonPipe untuk ekspresi.

Misalnya, tentukan objek dan larik di komponen Anda:

import { Component } from"@angular/core";
@Component({
 selector: "app-root",
 templateUrl: "./app.component.html",
 styleUrls: ["./app.component.scss"],
})
exportclass AppComponent {
 user: data = {
 firstname: "John",
 lastname: "Doe",
 };
 profiles: data[] = [
 {
 firstname: "John",
 lastname: "Doe",
 },
 {
 firstname: "Peter",
 lastname: "Parker",
 },
 ];
}
interface data {
 firstname: string;
 lastname: string;
}

Blok kode di atas mendefinisikan a pengguna objek dan a profil Himpunan. Sekarang, Anda dapat menggunakan JsonPipe untuk mengubah objek dan larik menjadi JSON.

<p>{{ user | json}}p>
<p>{{ profiles | json}}p>

Di sini, JsonPipe akan mengkonversi pengguna objek dan profil array menjadi string JSON, yang dapat Anda periksa dengan cepat di template Anda selama pengembangan atau debugging.

SlicePipe

Itu SlicePipe sangat mirip dengan JavaScript mengiris() metode. Itu SlicePipe memformat array atau string dengan mengekstrak elemennya untuk membuat array atau string baru.

Untuk menggunakan SlicePipe, Anda menggunakan simbol pipa diikuti oleh mengiris dan dua parameter, indeks awal dan akhir. Indeks awal adalah posisi dalam larik atau string tempat pipa akan mulai mengekstraksi elemen, dan indeks akhir adalah tempat pipa akan berhenti mengekstraksi elemen.

Berikut adalah contoh cara menggunakan SlicePipe:

<p>{{ string | slice: 0:2}}p>
<p>{{ array | slice: 0:1}}p>

Dalam contoh ini, SlicePipe akan mengekstrak dua elemen pertama dari rangkaian variabel, elemen pada indeks 0 dan elemen pada indeks 1. Selanjutnya, itu akan mengekstrak elemen pertama dari Himpunan variabel. Itu SlicePipe berguna saat Anda ingin menampilkan hanya sebagian data dalam template.

AsyncPipe

AsyncPipe adalah pipa Angular bawaan yang secara otomatis berlangganan dan berhenti berlangganan Observable atau Promise. Ini mengembalikan nilai terbaru yang dipancarkan oleh Observable atau Promise.

Sintaks untuk menggunakan AsyncPipe adalah sebagai berikut:

{{ expression | async }}

Di sini, ekspresinya adalah Observable atau Promise yang ingin Anda langgani.

Misalnya:

let numbers = of(1, 2, 3, 4, 5);

Anda dapat gunakan AsyncPipe untuk berlangganan Observable ini dan menampilkan nilai terbaru yang dipancarkan seperti ini:

<p>{{ numbers | async }}p>

Blok kode ini akan menampilkan nomor terbaru yang dipancarkan oleh Observable. AsyncPipe sangat berguna saat menangani operasi asinkron di template Anda. Secara otomatis berlangganan Observable atau Promise ketika komponen diinisialisasi dan berhenti berlangganan ketika dihancurkan.

Merangkai Pipa di Angular

Anda dapat merangkai pipa bersama untuk melakukan beberapa transformasi dalam satu ekspresi. Merangkai pipa sesederhana menggunakan banyak operator pipa (|) dalam satu ekspresi. Output dari setiap pipa menjadi input berikutnya.

Inilah sintaks dasarnya:

<p>{{ expression | pipe1 | pipe2 |... }}p>

Misalnya, Anda dapat mengubah objek tanggal menjadi string menggunakan DatePipe dan kemudian ubah string itu menjadi huruf besar menggunakan Pipa Huruf Besar.

<p>Today's date is {{ currentDate | date:'shortDate' | uppercase }}p>

Buat Aplikasi Dinamis Menggunakan Pipa

Pipa adalah fitur canggih di Angular yang memungkinkan Anda mengubah data sebelum ditampilkan dalam tampilan. Di sini, Anda belajar tentang berbagai penawaran Angular pipa bawaan, seperti DatePipe, CurrencyPipe, UpperCasePipe, dll. Anda juga mempelajari cara menggunakannya dalam aplikasi Anda untuk membuat konten yang lebih dinamis. Menggunakan pipa, pengembang dapat membuat aplikasi web yang lebih fleksibel dan dinamis dengan lebih sedikit kode.