Pada tutorial kali ini saya akan kembali memberikan materi tentang Angular 4 yaitu Mengenal Dan Membuat Event Binding Pada Angular 4,  di tutorial sebelumnya saya telah membahas tentang property binding .
Saat pengguna berinteraksi dengan aplikasi , terkadang perlu diketahui kapan hal ini terjadi. apakah saa terjadi sebuah klik, hover, atau tindakan keyboard. Itu adalah semua peristiwa yang dapat Anda gunakan untuk memanggil logika komponen dalam Angular 4. . Dalam tutorial ini, mari kita lihat lebih dekat properti yang mengikat dan cara kerjanya
Tipe-tipe Event Binding
Kapan pun Anda ingin mengambil event dari view, Anda melakukannya dengan membungkus event yang dimaksud dengan () tanda kurung. Angular memberi Anda berbagai acara yang dapat Anda gunakan untuk memanggil logika komponen. Berikut adalah contoh acara paling umum yang dapat Anda gunakan untuk menggunakan event binding :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
(focus)="myMethod()" // An element has received focus (blur)="myMethod()" // An element has lost focus (submit)="myMethod()" // A submit button has been pressed (scroll)="myMethod()" (cut)="myMethod()" (copy)="myMethod()" (paste)="myMethod()" (keydown)="myMethod()" (keypress)="myMethod()" (keyup)="myMethod()" (mouseenter)="myMethod()" (mousedown)="myMethod()" (mouseup)="myMethod()" (click)="myMethod()" (dblclick)="myMethod()" (drag)="myMethod()" (dragover)="myMethod()" (drop)="myMethod()" |
Event Binding in Action
Dalam prakteknya event binding di tuliskan dengan cara seperti ini :
|
1 |
<button (click)="myEvent($event)">My Button</button> |
*Catatan : $event parameter hanya optional.
LAngkah selanjutnya , buat method myEvent() pada komponen class :
|
1 2 3 4 5 6 7 |
export class AppComponent { myEvent(event) { console.log(event); } } |
Stelakan munah semuanya di buat maka jalankan dengan car ng serve pada terminal, lalu buka localhost:4200 dan kalian akan melihat tombol, lalu klik tombol tersebut maka hasilnya akan muncul log consolenya , kalian tinggal buka console di web browser saja.