Angular Observable – Part 1

by

Pengenalan Observable

Observable adalah cara untuk melakukan pertukaran messages antar modul pada aplikasi. Kelebihan dari observable adalah dapat menangani multiple values, asynchronous programming, dan dapat melakukan event handling. Contohnya adalah

  • Penggunaan custom events yang menghasilkan data output observable dari child ke parent component.
  • Pada HTTP module digunakan observables untuk menangani AJAX requests dan responses.
  • Pada modul Router dan Forms digunakan observables untuk listen dan respond terhadap user-input events.

Observable selalu berpasangan dengan observer, yaitu code yang kita buat. Berikut diagram interaksi dari observable dan observer.

Penggunaan Obvservable dalam Routing

Untuk memudahkan mengikuti tutorial, Anda bisa download starting project disini: https://drive.google.com/file/d/1keI8OTY9F7CaeVPatgo–Rmh0Q6bEGCP/view?usp=sharing

Untuk menjelaskan observable, kita akan gunakan contoh sederhana, yaitu routing.

Jika Anda jalankan project diatas, akan tampil seperti berikut, dimana jika link user ID diclick, maka data yang ditampilkan akan diupdate.

Observable pada project ini adalah object params yang berada di file user.component.ts.

this.route.params.subscribe((params: Params) => {
    this.id = +params.id;
  });

Untuk melalukan observasi, kita gunakan method subcribe(). Ketika perubahan terjadi, arrow function (dalam hal ini adalah observer) akan dijalankan.

Disini digunakan built-in observable. Kita dapat membuat custom observable yang akan dibahas pada modul berikutnya.

Sharing is caring:

Leave a Comment