Angular Observable – Part 2

Pada modul sebelumnya kita mengenal observable built-in dari Angular. Disini kita akan bahas penggunaan custom observable yang disediakan oleh RxJS.

Untuk menggunakan observable, kita perlu import library RxJS.

Buka file home.component.ts, lalu tambahkan code untuk

• Import modul interval dari RxJS.
• Gunakan interval sebagai observable.

import { Component, OnInit } from '@angular/core';
//import modul interval dari rxjs.
import { interval} from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    //gunakan function interval dan lakukan subscribe.
    interval(1000).subscribe(_count=>{
      console.log(_count);
    })
  }

}

function interval akan membuat Observable yang menghasilkan sequential numbers setiap interval waktu yang dispesifikasikan. Pada contoh diatas adalah setiap 1 detik.

KIta observe perubahan tersebut menggunakan method subscribe, dan akan dilakukan console.log().

Jika Anda buka aplikasi, dan pilih menu home, kemudian buka developer tools, maka kurang lebih akan tampil seperti berikut:

Hal yang perlu diperhatikan, ketika Anda pindah ke menu selain Home. Observable tetap berjalan.

Bahkan jika Anda kembali ke halaman Home, observable baru akan dibuat.

Hal diatas dapat menyebabkan memory leak. Untuk itu kita perlu modifikasi code diatas untuk melakukan unsubscribe. Untuk itu kita harus lakukan beberapa hal yaitu

• Menyimpan subscription kedalam local variable
• Mengimplementasikan OnDestroy, dimana dalam method ini kita akan melakukan unsubscribe() ketika component sudah tidak digunakan.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { interval, Subscription} from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {
  private mySubcription! : Subscription;

  constructor() { }

  ngOnInit() {
    this.mySubcription = interval(1000).subscribe(_count=>{
      console.log(_count);
    })
  }

  ngOnDestroy(): void {
    this.mySubcription.unsubscribe();
  }
}

Jika Anda jalankan aplikasi, buka halaman home, lalu pindah ke halaman selain home. Sesuai ekspektasi, sekaran observable berhenti berjalan di background.

Angular Built-in Observable

Mungkin Anda akan bertanya, mengapa pada code routing yang menggunakan observable tidak digunakan method unsubscribe()?

Untuk Angular built-in observable, kita tidak perlu melakukan unsubscribe secara manual, karena sudah dihandling oleh Angular.

Sampai disini kita sudah mempelajari menggunakan custom observable dari RxJS. Pada modul berikutnya akan dibahas membuat custom observable kita sendiri.