Farih.co.id
Home Programming Panduan Komprehensif tentang Pipa di Angular

Panduan Komprehensif tentang Pipa di Angular

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


VIDEO MUO HARI INI

GULIR UNTUK MELANJUTKAN ISI

Apa Itu Pipa di Angular?

Pipa sudut adalah transformator data yang membuat aplikasi Anda lebih dinamis. Mereka mengambil nilai sebagai masukan dan mengembalikan nilai yang diubah sebagai keluaran. Transformasi data bisa sesederhana memformat tanggal, atau mata uang, atau rumit seperti memfilter atau mengurutkan daftar item.

Anda dapat menggunakan pipa di komponen Angular dan templat Anda. Pipa mudah digunakan, dan Anda dapat merangkainya untuk menciptakan transformasi yang lebih kompleks.

Angular menyediakan beberapa pipa built-in termasuk Pipa Tanggal, Pipa Huruf Besar, Pipa Huruf Kecil, Pipa Mata Uang, Pipa Desimal, PersenPipe, JSONPipe, IrisPipeDan Pipa Asinkron. Ini juga menyediakan fungsionalitas untuk membuat pipa khusus.

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

Pipa Tanggal

Itu Pipa Tanggal memformat dan menampilkan variabel tanggal dan waktu Anda dalam format tertentu, dengan mempertimbangkan lokal Anda. Tidak seperti kerangka kerja lain yang memerlukan paket JavaScript untuk memformat tanggal dan waktu, Angular menggunakan Pipa Tanggal. Menggunakan Pipa Tanggal di 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 meneruskan tanggal sekarang variabel melalui Pipa Tanggal, yang kemudian memformatnya sesuai dengan format tanggal default. Anda mendefinisikan tanggal sekarang variabel dalam file TypeScript komponen Anda.

Berikut ini contohnya:

 import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  currentDate: any = new Date();
}

Anda juga dapat meneruskan parameter tambahan ke Pipa Tanggal untuk menyesuaikan output:

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

Blok kode di atas melewati kencan singkat parameter ke Pipa Tanggal. Hal ini memberitahukan Pipa Tanggal untuk memformat tanggal menggunakan format tanggal pendek. Di samping kencan singkat parameter, Anda dapat mengonfigurasi Pipa Tanggal menggunakan berbagai parameter, termasuk z, tanggal panjangdan format tanggal khusus seperti hh/MM/YY.

UpperCasePipe dan LowerCasePipe

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 Keciltambahkan 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>

Pipa Mata Uang

Menggunakan Pipa Mata Uang, Anda dapat memformat angka ke mata uang di aplikasi Anda. Itu Pipa Mata Uang memformat angka sesuai dengan lokal Anda. Untuk memformat nomor Anda menggunakan Pipa Mata Uanggunakan simbol pipa diikuti dengan mata uang.

Misalnya:

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

Dalam contoh ini, Pipa Mata Uang mengonversi variabel angka menjadi mata uang. Secara default, Pipa Mata Uang mengonversi variabel menjadi dolar. Untuk mengubahnya, Anda dapat mengkonfigurasi Pipa Mata Uang untuk mengkonversi ke mata uang lain dengan melewati parameter tambahan.

Berikut ini contohnya:

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

Di sini, Anda lulus GBP parameter ke Pipa Mata Uang. Hal ini memastikan bahwa nomor variabel dikonversi ke mata uang Pound Inggris.

DesimalPipe dan PercentPipe

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

Untuk menggunakan Pipa Desimalgunakan simbol pipa diikuti dengan nomor dan parameter tambahan. Untuk menggunakan PersenPipelakukan 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, itu 2.3 parameter menentukan bahwa harus ada setidaknya 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 objek dan array.

Sintaks untuk menggunakan JSONPipe adalah sebagai berikut:

 {{ expression | json }}

Di Sini, ekspresi adalah data yang ingin Anda konversi ke format JSON. Operator pipa (|) menerapkan JSONPipe ke ekspresi.

Misalnya, tentukan objek dan array di komponen Anda:

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})

export class 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 array menjadi JSON.

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

Di sini, itu JSONPipe akan mengkonversi pengguna objek dan itu profil array ke dalam string JSON, yang dapat Anda periksa dengan cepat di templat Anda selama pengembangan atau proses debug.

IrisPipe

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

Untuk menggunakan IrisPipeAnda menggunakan simbol pipa diikuti dengan mengiris dan dua parameter, indeks awal dan akhir. Indeks awal adalah posisi dalam array atau string tempat pipa akan mulai mengekstraksi elemen, dan indeks akhir adalah tempat pipa akan berhenti mengekstraksi elemen.

Berikut adalah contoh cara menggunakan IrisPipe:

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

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

Pipa Asinkron

Pipa Asinkron adalah pipa Angular bawaan yang secara otomatis berlangganan dan berhenti berlangganan Observable atau Promise. Ini mengembalikan nilai terbaru yang dikeluarkan oleh Observable atau Promise.

Sintaks untuk menggunakan Pipa Asinkron adalah sebagai berikut:

 {{ expression | async }}

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

Misalnya:

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

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

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

Blok kode ini akan menampilkan nomor terbaru yang dikeluarkan oleh Observable. Pipa Asinkron sangat berguna saat menangani operasi asinkron di templat Anda. Secara otomatis berlangganan Observable atau Promise ketika komponen diinisialisasi dan berhenti berlangganan ketika komponen tersebut dimusnahkan.

Merangkai Pipa dalam Sudut

Anda dapat menyatukan pipa untuk melakukan beberapa transformasi dalam satu ekspresi. Merangkai pipa semudah menggunakan banyak operator pipa (|) dalam satu ekspresi. Keluaran setiap pipa menjadi masukan untuk pipa berikutnya.

Berikut sintaks dasarnya:

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

Misalnya, Anda dapat mengubah objek tanggal menjadi string menggunakan Pipa Tanggal 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 mempelajari berbagai pipa bawaan yang ditawarkan Angular, seperti DatePipe, CurrencyPipe, UpperCasePipe, dll. Anda juga mempelajari cara menggunakannya dalam aplikasi Anda untuk membuat konten yang lebih dinamis. Dengan menggunakan pipa, pengembang dapat membuat aplikasi web yang lebih fleksibel dan dinamis dengan lebih sedikit kode.

Pertanyaan Umum

T: Bagaimana Cara Membuat Pipa Kustom Saya Sendiri?

Di samping pipa bawaan ini, Anda dapat membuat pipa khusus untuk memformat data sesuai kebutuhan Anda.

T: Apa Perbedaan Antara Pipa dan Petunjuk?

Arahan bawaan Angular menerima dan memanipulasi elemen DOM, sementara pipa beroperasi pada data.

T: Apakah Angular Masih Memperbaiki Pipa?

Pipa merupakan bagian yang stabil dari kerangka kerja tersebut, namun dukungannya terus meningkat. Misalnya, dalam rilis v16, Anda kini dapat secara otomatis membuat file pipa menggunakan Angular CLI.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad