Pada modul ini akan kita bahas langsung contoh penggunaan built-in pipes.
Karena pipes bekerja merubah output, kita akan banyak bekerja dalam file html.
Buka file app.component.html
uppercase
Untuk membuat tampilan server.instanceType menjadi huruf besar, digunakan pipe uppercase.
{{ server.instanceType | uppercase }}
date
Pipe date berguna menampilkan format date. Kita gunakan untuk mengubah tampilan server.started.
{{ server.started | date }}
Menggunakan Parameter
Format untuk customized pipe adalah menggunakan colon (titik dua). Contoh kita gunakan pipe date diatas.
{{ server.started | date:'fullDate' }}Untuk melihat option dari parameter yang disediakan untuk date pipe, silakan kunjungi di https://angular.io/api/common/DatePipe
Chaining Pipe
Kita juga dapat melakukan chaining pipe. Contohnya, kita ingin format date seperti diatas, kemudian ditampilkan dengan huruf besar.
{{ server.started | date:'fullDate' | uppercase }}
Hal yang perlu Diperhatikan
Dalam melakukan pipe adalah tipe data dari yang variable. Jika Anda melakukan chaining juga perhatikan tipe data output dari pipe sebelumnya.
Contoh, uppercase memerlukan input string, jika Anda lakukan pada variable server.started akan terjadi error.
{{ server.started | uppercase }}
#error karena uppercase memerlukan input string.Demikian juga dengan chaining, chaining akan diparsing dari kiri ke kanan, jadi code dibawah juga akan menyebabkan error.
{{ server.started | uppercase | date:'fullDate' }}
#error karena, parsing pipe dilakukan dari kiri kekanan, sementara uppercase membutuhkan input string.Modul ini bertujuan memperkenalkan fitur pipe, untuk mempelajari lebih mendalam mengenai built-in pipes, silakan kunjungi https://angular.io/api?query=pipe
Pada modul berikutnya kita akan bahas membuat custom pipe.