Angular 4 : Pipe

Assalamu’alaikum Wr. Wb

Sudah sekian lama saya tidak update tutorial terkait Angular 4. Alhamdulillah pada kesempatan kali ini saya ingin membagikan sedikit ilmu tentang bagaimana membuat pipe.

Pertama-tama, saya ingin menjelaskan apa itu pipe…

Pada setiap kali kalian membuat aplikasi web, pasti sudah biasa mengambil data baik dari database atau dari web service, dan kemudian menampilkannya ke user. Nah, Pipe pada angular 4 berguna untuk mengubah tampilan nilai sesuai keinginan. Misal ada tampilan date yang awal formatnya “yyyy-MM-dd”, kemudian dengan pipe kita bisa mengubahnya menjadi “MM/dd/yy”, atau apapun sesuai keinginan kalian.

Contoh :

• Buat starter project angular

• Hapus file yang ada di app.component.html, dan paste kode berikut :

code di app.component.html

• Kemudian tambahkan variable “birthday” di app.component.ts

code di app.component.ts

• Ketika dilihat maka hasilnya sebagai berikut, kurang enak dipandang kan?

Hasil

• Kemudian kita tambahkan pipe seperti berikut

tambah pipe date

• Ketika dilihat maka hasilnya sebagai berikut. Sekarang terlihat lebih baik :D

hasil akhir

Nah, sekarang bagaimana jika teman-teman semua ingin membuat pipe sendiri? … kita bisa ambil contoh misal membuat pipe membuat pemangkatan matematika, seperti yang ada pada dokumentasi Angular 4 https://angular.io/guide/pipes

Mari kita coba…

1. Agar folder lebih bersih kita buat folder pipe di folder app

struktur folder pipe

2. Kemudian kita buat file misal sebut saja PangkatPipe.ts

3. Di awal kita membuat jangan lupa tambahkan

import { Pipe, PipeTransform } from ‘@angular/core’;

4. Kemudian tulis kode berikut

code di PangkatPipe.ts

di atas class terdapat @Pipe dan ada parameter name, name tersebut adalah bagaimana kita memanggil pipe tersebut.

dapat kita lihat bahwa PipeTransform merupakan interface

interface PipeTransform { 
  transform(value: any, ...args: any[]): any
}

kita dapat memasukkan apapun nilai keluarannya karena : any

pada kali ini kita akan menggunakan “number” sebagai nilai keluarannya

value di atas adalah nilai yang akan kita transfrom, dan exponent merupakan parameter yang ada pada pipe kita

penjelasan lebih lanjut sudah saya beri komentar pada kodenya.

5. Untuk dapat menggunakan pipe kita, jangan lupa import pipe tersebut di app.module.ts

app.module.ts

6. Sekarang kita panggil pipe kita

Kita tambahkan variable nilai dengan nilai 10.

app.component.ts

kemudian, di app.component.html

app.component.html

simpan semua codingan…

kemudian hasilnya akan seperti berikut :

hasilnya

Sekian tutorial singkat, dan dasar yang bisa saya sampaikan

Sebagai bahan belajar saya sertakan link github saya.

https://github.com/dhanarJkusuma/Tutorial-Angular4/tree/t/membuat-pipe

Terima Kasih sudah membaca ^_^

Wassalamu’alaikum Wr. Wb