Angular 4 : Event Emitter

Assalamu’alaikum Wr. Wb

Pada kesempatan kali ini, penulis ingin membagikan ilmu tentang “Event Emitter”. Dengan menggunakan Event Emitter, kita dapat mengirimkan event, dan meng-custom event.

Untuk percobaan, penulis memulai project dengan dua buah component. Ini dapat dilanjutkan dari tutorial “Angular 4 : Input & Passing Variable Antar Component” atau dapat anda download di GitHub.

Berikut ada struktur folder nya :

struktur folder

Dan berikut adalah tampilan awal nya :

tampilan awal

Sebagai contoh percobaan Event Emitter, penulis akan membuat tombol reset pada form yang ada di component Example.

Langkah untuk membuat tombol reset, dengan menggunakan EventEmitter & Output adalah sebagai berikut :

Pertama, buka example.component.html. Tambahkan html button.

code example.component.html

Kedua, import Output, EventEmitter dari “@angular/core” di example.component.ts.

import Output, dan EventEmitter di example.component.ts

Ketiga, buat variable EventEmitter<string> dengan nama reset, dan dengan decorator @output

membuat variable EventEmitter<string>

Keempat, tambahkan event click pada button reset, dan arahkan ke fungsi onReset()

menambahkan event (click)

Kelima, pada method onReset(), emit variable reset dengan parameter string, sesuai keinginan anda.

melakukan emit() pada variable reset di method onReset()

setelah melakukan hal diatas maka berikut adalah tampilan code example.component.ts

code example.component.ts

Keenam, dengan parameter @ouput reset pada example.component.ts, maka event tersebut dapat di custom sesuai keinginan kita dengan menambahkan atribut (reset) pada component app, dan arahkan event ke fungsi onPencet() dengan parameter $event.

menambahkan attribut (reset) pada component app-example di app.component.html

Ketujuh, isi method onPencet(). Pada method ini, penulis ingin menampilkan parameter $event.

menampilkan variable event pada method onPencet di app.component.ts

Berikut adalah tampilan app.component.ts secara keseluruhan :

code app.component.ts

Berikut adalah hasil compile dari kode di atas:

hasil kode

Ketika, tombol reset ditekan, maka akan menampilkan tulisan “hello emit” atau tulisan yang anda buat pada saat anda melakukan emit pada EventEmitter.

Untuk menerapkan fungsi reset anda dapat menambahkan kode menjadi berikut :

hasil akhir code di app.component.ts

Sekian tutorial yang dapat saya sampaikan tentang EventEmitter. Untuk source code, anda dapat lihat di “GitHub”. Apabila anda menemukan sebuah kesalahan dalam menyampaikan, teori, penggunaan dsb, anda dapat menyampaikannya di kotak komentar.

Terima Kasih sudah mengunjungi tulisan ini.

Wassalamu’alaikum Wr. Wb