lifelong learner — urip iku urup, currently working on accenture.

Chapter 2 – Directive, Pipe & Custom Pipe – Angular 2 tutorial bahasa

2
Degananda.com -

0. Pre-requiste

Pada chapter 2 ini akan dibahas mengenai penggunaan beberapa directive dari angular yakni event pada suatu elemen, data binding, pipe dan pembuatan custom pipe. Sebelum mengikuti chapter 2 ini mohon untuk mempelajari chapter 1 karena komponen yang digunakan berasal dari chapter sebelumnya dan begitu juga untuk chapter-chapter selanjutnya. Anda dituntut telah memahami mengenai komponen untuk mengikuti chapter ini.

untuk mempermudah mempelajari chapter 2 ini gunakan repository berikut ini yang merupakan source code dari ulasan dibawah.

https://github.com/degananda/angular-note/tree/2.0

1. Data binding

Data binding adalah suatu mekanisme pertukaran data yang terjalin antara komponen(class) dengan komponen view. Contohnya pada komponen terdapat variabel nama bertipe string, dan pada komponen view menampilkan variabel tersebut dalam sebuah <div>. Hal ini disebut dengan data binding. Terdapat dua jenis data binding yaitu one-way databinding dan two-way data binding. Kabar baiknya angular mensuppor two way databinding. Perbedaanya adalah one way data binding hanya dapat merubah isi variabel pada komponen sedangkan two way data binding ketika data pada view diubah(biasannya menggunakan form) maka variabel yang menyimpan pada komponen juga ikut berubah. Angular selalu melakukan pengecekan terhadap perubahan tersebut melalui lifecycle hooks. Hal inilah yang membuat performa angular tidak secepat react dikarenakan angular mensupport two way data binding. Pada one way data binding kita perlu membuat sebuah fungsi “watchers” untuk mengontrol perubahan pada view dan kemudian melakukan update variabel data komponen. Berikut ini adalah ilustrasi perbedaan antara one way data binding dan two way data binding.

Screen Shot 2017-05-19 at 1.15.42 PM

Screen Shot 2017-05-19 at 1.16.15 PM

1.1 Contoh data binding

Untuk mencoba membuat one way data binding hal yang pertama kali harus dilakukan adalah membuat variabel yang menyimpan data pada komponen com-note.component.ts.


export class ComNoteComponent implements OnInit {

  isi_note : String;
  tanggalNote : any;

  constructor() {
  }

Angular ditulis dengan menggunakan typescript. Typescript adalah superset dari javascript yang memiliki fitur-fitur yang tidak dimiliki oleh javascript. Misalnya, tipe data. Pada contoh diatas kita dapat mendefinisikan tipedata dari sebuah variabel(string). Menurut pandangan pribadi kami, tidak perlu mempelajari typescript karena seiring dengan kita terbiasa menggunakan angular maka kemampuan menulis typescript juga akan meningkat(semakin mahir). Setelah variabel isi_note didefinisikan kita perlu memberikan value awal.
Pada chapter sebelumnya , kita telah mempelajari mengenai lifecycle hooks, salah satunnya adalah ngOnInit(), hook ini akan dipanggil saat komponen dibuat. Oleh karena itu kita dapat memberikan isi terhadap variabel isi_note pada ngOnInit().


ngOnInit() {
  // menginisiasi isi dari note.
  this.isi_note = 'Hello ini note saya';
  this.tanggalNote = new Date().getTime();
}

Layaknya javascript pada umumnya, untuk memberikan nilai(value) pada suatu variabel pada typescript dilakukan sama seperti pada javascript. Hanya saja, yang perlu diperhatikan adalah isi dari variabel harus sesuai dengan tipedata pada variabel. Pada kasus ini, variabel isi_note memiliki tipedata string. Jika kita mencoba untuk memberikan nilai boolean maka compiler akan error.

Screen Shot 2017-05-19 at 1.19.08 PM

secara otomatis miscrosoft visual studio(IDE yang saya gunakan) memberikan pesan error.

Screen Shot 2017-05-19 at 1.19.41 PM

Jika tidak ingin repot-repot menginisiasi variable dengan tipedata cukup kosongkan atau gunakan tipedata “any”. Kembali pada topik bahasan, untuk melengkapi proses oneway data binding, kita perlu menampilkan variabel “isi_note” pada komponen view com-note.component.html dengan menggunakan {{nama variabel}} (double bracket).


<div class="note">

  <div class="note_content">
    {{isi_note}} 
  </div>


  <div class="note_action">
    <a class="btn">Edit</a> <a class="btn">Delete</a>
  </div>

</div>

jika kita buka pada browser :

Screen Shot 2017-05-19 at 1.21.37 PM

dengan ini maka kita telah berhasil melakukan one-way data binding.

1.2 Two way data binding

Two way data binding pada angular akan dijelaskan pada chapter 4 berbarengan dengan materi mengenai form. Sehingga untuk saat ini cukup difaham secara gamblang mengenai two way data binding. Ini dikarenakan two way data binding sangat erat kaitannya dengan form. Oleh karena itu penjelasan form dan two way data binding secara bersamaan kami rasa akan sangat memudahkan bagi kita untuk mempelajari.

2. User input event

Event adalah suatu kejadian yang terjadi. User input event adalah kejadian yang berada dalam scrope user input. Contohnya adalah ketika user mengklik tombol. Pada angular event ini dapat dihandle dengan directive (click). Berikut ini adalah beberapa user input event

Nama User Input Event Fungsi
(click) Dijalankan ketika user mengklik suatu elemen yang diberikan directive
(keyup) Ketika user menekan salah satu keypad dan kemudian melepaskannya
(keypress) Ketika user menekana salah satu keypad
(keyup.enter) Ketika user menekana salah keypad “enter”
(blur) Ketika mouse dari user keluar dari box/elemen dan melakukan klik diluar dari box/elemen tanpa menekan enter.

Tabel 1 Contoh user input event

User input event diatas merupakan yang umum digunakan dalam membangun aplikasi angular. Untuk daftar user input event yang disupport oleh angular dapat dibaca di : https://angular.io/docs/ts/latest/guide/user-input.html.

2.1 Click

Pada project pembuatan angular note dichapter 1 sebelumnya kita telah membuat dua buah tombol edit dan delete. Sekarang kita akan berikan sebuah event “click” pada tombol edit yang kemudian akan mengganti isi dari variable “isi note”. Langkah pertama yakni memberikan directive (click) pada elemen tombol “edit”.


 <div class="note_action">
    <a class="btn" (click)="editNote()">Edit</a> <a class="btn">Delete</a>
 </div>

 

Kemudian pada komponen com-note.component.ts buat fungsi editNote() yang berfungsi untuk mengubah isi dari variabel isi_note.

/*
Event action.
*/

editNote(){
  // mengubah isi note.
  this.isi_note = 'Hello note ini telah diubah.';
}

Saat ini jika kita tekan tombol edit di klik maka isi_note yang tampil pada komponen view akan berubah.

Screen Shot 2017-05-19 at 1.24.40 PM

3. Pipe

Pipe adalah sebuah directive dari angular yang memiliki fungsi untuk mentransformasi suatu text menjadi bentuk yang baru. Contohnya ada beberapa fungsi pipe default yang disediakan oleh angular yaitu :

  1. Uppercase, merubah huruf menjadi besar
  2. Lowercase, merubah huruf menjadi kecil
  3. Date, merubah format dari date. Contoh dari timestamp menjadi dd-mm-yyyy h:i:s
  4. Curreny, merubah format uang

Untuk penjelasan detail mengenai fungsi pipe diatas dapat dilihat pada https://angular.io/docs/ts/latest/guide/pipes.html. Pipe disematkan pada double bracket yang berada di komponen view. Contohnya {{ nama variabel | nama pipe}}. Pipe harus diletakan setelah variabel yang menyimpan suatu data dan dilanjutkan dengan simbol “|” setelah itu baru disandingkan dengan nama pipenya. Contoh pada kasus note ini kita akan merubah semua huruf dari isinote menjadi kapital.

3.1 Upper case

Pada com-note.component.html kita akan membuat bracket baru dengan menggunakan pipe uppercase namun dengan data yang sama (isi_note).


<div class="note_content">
    {{isi_note}} 
    {{isi_note | uppercase }} 
</div>

3.2 Date

Kali ini kita akan menambahkan informasi mengenai kapan note tersebut dibuat. Pada com-note.component.ts tambahkan variabel tanggal note yang isinnya diambil dari object date dan diambil nilai timestampnya untuk mendapatkan timestamp saat ini.

isi_note : String;
tanggalNote : any;

Kemudikan berikan isi dari tanggalnote dengan menggunakan object date.

ngOnInit() {
  // menginisiasi isi dari note.
  this.isi_note = 'Hello ini note saya';
  this.tanggalNote = new Date().getTime();
}

terahir pada komponen view com-note.component.html tambahkan bracket untuk menampilkan tanggalNote disertai dengan date pipe.


<div class="note">

  <div class="note_content">
    {{isi_note}} 
    {{isi_note | uppercase | pipeSensor}} 
    date created : {{tanggalNote | date:'medium' }}
  </div>


  <div class="note_action">
    <a class="btn" (click)="editNote()">Edit</a> <a class="btn">Delete</a>
  </div>

</div>

untuk informasi lengkap mengenai date pipe pada angular dapat dilihat di halaman resmi dari angular (https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html)

3.3 Custom Pipe

Custom pipe adalah pipe yang kita buat sendiri. Artinnya proses transformasi kita buat sendiri sesuai dengan tujuan yang akan kita capai. Pada kasus kali ini kita akan menbuat custom pipe dengan tujuan untuk mensensor kata “hello” menjadi “censored”

  1. Buat sebuah pipe dengan angular-cli dan menuliskan perintah
     ng g pipe pipe-sensor

    dengan angular-cli ini otomatis pipe yang baru saja kita buat telah terintegrasi dengan app-module.ts hal ini sangat menhemat waktu development.

    import { PipeSensorPipe } from './pipe-sensor.pipe';
    // dari newbie untuk newbie
    @NgModule({
    declarations: [
    AppComponent,
    ComNoteComponent,
    PipeSensorPipe
    ],
    
  2. Tuliskan kode berikut pada pipe-sensor.pipe.ts untuk melakukan sensor. Logika dari potongan kode dibawah ini adalah mengubah input dari pipe menjadi string kemudian memanfaatkan fungsi replace pada suatu string.
    
    import { Pipe, PipeTransform } from '@angular/core';
    
    @Pipe({
    name: 'pipeSensor'
    })
    export class PipeSensorPipe implements PipeTransform {
    
      transform(value: any, args?: any): any {
       let currentValue : String = value;
       let newValue : String = currentValue.toLowerCase().replace("hello", "censored");
       return newValue;
      }
    
    }
    
  3. Mengimplementasikan custom pipe pada bracket pada com-note.component.html
    
    <div class="note_content">
        {{isi_note}} 
        {{isi_note | uppercase | pipeSensor}} 
        date created : {{tanggalNote | date:'medium' }}
    </div>