Cara Membuat Pipa Kustom di Angular

Pipa adalah fitur Angular canggih yang memungkinkan Anda mengubah dan memformat data dalam aplikasi Anda. Mereka menyediakan cara mudah untuk memanipulasi data sebelum menampilkannya kepada pengguna, menjadikan aplikasi Anda lebih dinamis dan ramah pengguna.

Angular menawarkan berbagai pipa bawaan seperti DatePipe, CurrencyPipe, dan UpperCasePipe. Seiring dengan pipa bawaan yang ditawarkan Angular, Anda dapat membuat pipa khusus untuk mengubah data sesuai kebutuhan Anda.

Siapkan Proyek Sudut Anda

Sebelum membuat pipa khusus, pastikan Anda memahami pipa di Angular. Untuk dapat menyiapkan proyek Angular, pastikan Anda telah menginstal Angular CLI di mesin Anda. Anda dapat menginstalnya dengan npm (Manajer Paket Node).

Instal Angular CLI dengan menjalankan perintah berikut:

npm install -g @angular/cli

Selanjutnya, buat proyek Angular baru dengan menjalankan perintah ini:

ng new my-app

Setelah Anda membuat proyek, navigasikan ke direktori proyek Anda dan buka aplikasi Anda di IDE Anda.

Buat Pipa Kustom

Sekarang Anda telah menyiapkan aplikasi Angular, hal berikutnya yang harus dilakukan adalah membuat pipa khusus. Untuk membuat pipa khusus, Anda harus membuat pipa baru menggunakan Angular CLI.

Untuk melakukannya, jalankan perintah berikut di direktori aplikasi Anda di terminal:

ng generate pipe customPipe

Perintah ini akan menghasilkan dua file bernama pipa-kustom.pipe.ts Dan pipa-kustom.pipe.spec.ts dalam src/aplikasi direktori. File custom-pipe.pipe.ts adalah file TypeScript yang berisi kode untuk mendefinisikan pipa khusus Anda. Anda akan menggunakan custom-pipe.pipe.spec.ts untuk menjalankan pengujian pada pipa kustom.

Dalam pipa-kustom.pipe.ts file, Anda akan menemukan baris kode berikut:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: unknown, ...args: unknown[]): unknown {
returnnull;
 }
}

Blok kode ini mengimpor Pipa dekorator dan Transformasi Pipa antarmuka dari @sudut/inti modul. Dekorator Pipa mendefinisikan metadata untuk pipa, dan kelas pipa mengimplementasikan antarmuka PipeTransform.

Dalam Pipa Pipa Khusus kelas, Anda mengimplementasikan Transformasi Pipa antarmuka, yang memerlukan penerapan mengubah metode. Metode transformasi bertanggung jawab untuk mengubah nilai masukan.

Itu mengubah metode mengambil dua parameter, nilai Dan argumen. Parameter value mewakili nilai transformasi pipa, dan parameter args mewakili parameter opsional yang mungkin ingin Anda tambahkan.

Sekarang Anda telah memahami inti dari pipa-kustom.pipe.ts file, ganti blok kode di atas dengan kode ini:

import { Pipe, PipeTransform } from'@angular/core';
@Pipe({
 name: 'customPipe'
})
exportclass CustomPipePipe implements PipeTransform {
 transform(value: string): string[] {
return value.split('');
 }
}

Di blok kode ini, mengubah metode mengambil nilai parameter tipenya rangkaian sebagai argumen dan mengembalikan array string. Metode transformasi membagi string input menjadi array karakter individual menggunakan membelah metode dan mengembalikan array yang dihasilkan.

Mengintegrasikan Pipa Kustom ke dalam Aplikasi Anda

Anda telah berhasil membuat pipa khusus dan sekarang dapat menggunakannya di templat Angular Anda. Sebelum menggunakan pipa khusus di aplikasi Anda, impor dan deklarasikan di aplikasi Anda aplikasi.modul.ts mengajukan. Untuk melakukannya, ganti kode di app.module.ts dengan yang berikut:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { CustomPipePipe } from'./custom-pipe.pipe';
@NgModule({
 declarations: [
 AppComponent,
 CustomPipePipe
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclass AppModule { }

Sekarang Anda dapat menggunakan pipa di templat Anda. Buka aplikasi.component.html file dan tambahkan kode berikut:

<p>{{ 'apple' | CustomPipe }}p>

Dalam contoh ini, Anda menggunakan Pipa Khusus pipa untuk mengubah string 'apel' menjadi array string.

Uji Pipa Kustom Anda

Untuk melihat pipa kustom Anda beraksi, jalankan server pengembangan Angular. Anda dapat melakukan ini dengan menjalankan perintah terminal berikut:

ng serve

Buka browser Anda dan navigasikan ke http://localhost: 4200. Anda akan melihat string yang diubah ditampilkan di halaman:

Tingkatkan Aplikasi Angular Anda ke Tingkat Selanjutnya

Pipa adalah alat Angular canggih yang memungkinkan Anda mengubah dan memformat data dalam aplikasi Anda. Anda dapat membuat pipa khusus untuk memenuhi kebutuhan spesifik Anda dan membuat aplikasi Angular Anda lebih dinamis.

Cara lain untuk membawa aplikasi Angular Anda ke tingkat berikutnya adalah dengan memahami perutean di Angular. Perutean adalah konsep utama yang memungkinkan Anda mengontrol cara pengguna menavigasi aplikasi Anda. Dengan memahami perutean, Anda dapat membangun aplikasi satu halaman yang lebih ramah pengguna dan efisien.