Menggunakan pipes di Angular

Tutorial kali ini penulis akan membahas bagaimana menggunakan pipes di angular, namun sebelum kita memulai langkah langkah bagaimana menggunakan pipe mari kita kenalan dulu dengan apa yang namanya pipes.

Pipe merupakan tools yang disediakan oleh angular untuk mentranformasikan output yang akan ditampilkan oleh view. Seringkali data yang kita dapatkan dari back end ingin kita ubah bentuknya ketika ditampilkan di view, misalkan bentuknya diubah menjadi uppercase, lowercase, tanggalnya diubah menjadi format sesuai negara tertentu, dan lain-lain. Untuk melakukan hal tersebut maka digunakan pipe.

Menggunakan Pipes.

1. Clone atau download aplikasi yang akan kita tambahkan pipe di link berikut

https://github.com/zackstam/start-using-pipes/

2. Setelah proses cloning selesai , install dependency paket dengan menjalankan perintah npm install

3. Jalankan aplikasi dengan perintah npm start, maka akan ditampilkan tampilan aplikasi sebagaimana berikut

Nah pada tampilan view di atas, kita akan mengedit tampilan konten dari kolom kolomnya.

> Menggunakan default pipes

Di dalam angular terdapat beberapa pipes yang sudah disediakan oleh angular seperti uppercase ataupun lowercase untuk membuat karakter huruf besar dan kecil.

Membuat karakter Uppercase

Pada contoh kali ini kita akan menjadikan kolom nama menjadi huruf capital. Untuk menambahkan pipes di bagian output tambahkan |uppercasedi samping variabel student.namesehigga codingnya tampak sebagai berikut.

<td>{{ student.name | uppercase }}</td>

kalo anda jalankan aplikasi maka huruf kolom nama akan tampak seperti berikut

Menampilkan tanggal dengan format tertentu

Pada contoh kali ini kita akan menampilkan tanggal dengan format dd-MM-yyyy, pada konten kolom Birthdate tambahkan | date: 'dd-MM-yyyy' di samping student.birthdate sehingga tampak seperti berikut tampilannya.

> Membuat Pipes sendiri

Sering kali kita tidak mendapati pipe yang bisa kita gunakan untuk mentransformasi data yang akan kita tampilkan di view. Maka membuat pipes sendiri adalah solusinya. Untuk membuat pipe sendiri caranya adalah sebagai berikut

Buat file sesuai dengan sifat dari pipenya. Pada contoh kali ini kita akan merubah format gender yang tadinya singkatan P atau L menjadi panjang yaitu perempuan atau laki-laki. Maka mari kita buat pipes dengan nama gender. Buat file gender di folder root dengan nama gender.pipe.ts .

Buka file tersebut kemudian copy paste code berikut

import { PipeTransform, Pipe } from '@angular/core';
@Pipe({
  name: 'gender'
})
export class GenderPipe implements PipeTransform {
   transform(value: any) {
     if (value === 'L') {
       return 'Laki - laki';
     } else if (value === 'P') {
       return 'Perempuan';
     }
   }
}

Pada file pipe di atas terdapat tigaelement yang harus ada, yang pertama yaitu kita import dulu PipeTransform dan Pipe ke dalam file pipes. Selanjutnya yang kedua kita tambahkan decorator Pipe. Decorator pipe berisi object yang di dalamnya terdapat property name. Value dari property name ini berisi nama dari pipe yang akan kita deklarasikan di view. Yang ketiga kita ada class GenderPipe, yang mana di dalamnya harus ada method transform. Method transform digunakan untuk mengubah value ke view.

Setelah kita membuat file pipe, buka file app.module.ts kemudian tambahkan GenderPipe ke dalam declarations sehingga tampak sebagai berikut

import { GenderPipe } from './gender.pipe';
@NgModule({
   declarations: [
    ...
    GenderPipe
   ],
})

Pipe gender sudah ditambahkan ke app.module.ts, sehingga langkah kita selanjutnya menggunakan pipe tersebut dengan memasukkannya ke dalam view. Buka file app.component.html, dibagian content kolom gender tambahkan | gender. Sehingga output gender akan tampak sebagai berikut

Menambahkan argument di pipe

Kita dapat merubah hasil dari return pipe berdasarkan parameter tertentu yang kita lewatkan ketika memanggil pipe. Pada contoh di atas misalkan kita ingin menampilkan kepanjangan gender apakah L sebagai laki-laki atau pria dan apakah P sebagai perempuan atau wanita dengan melewatkan parameter tertentu. Parameter tersebut adalah 0 untuk laki-laki dan perempuan atau 1 untuk pria dan wanita. caranya adalah ubah method transform seperti tampak seperti berikut.

transform(value: any, argument: any) {
  if (value === 'L' ) {
    return argument === 0 ? 'Laki - laki' : 'Pria';
  } else if (value === 'P') {
    return argument === 0 ? 'Perempuan' : 'Wanita';
  }
}

Pada coding di atas kita menambahkan parameter argument yang nilainya bisa 0 atau 1 yang mana kalau 0 akan mengembalikan Laki-laki atau perempuan, dan kalau 1 akan mengembalikan Pria atau Wanita.

Selanjutnya tambahkan parameter 0 atau 1 saat memanggil pipe gender seperti berikut

<td>{{ student.gender | gender:1 }}</td>

Hasil akhir akan tampak seperti berikut