Angular Observable – Part 4

Salah satu hal yang penting dari observable, yaitu operators. Operators berguna sebagai proses penengah yang berguna untuk melakukan data prosesing.

Tentu Anda dapat lakukan pada fungsi subscribe() itu sendiri, namun dengan menggunakan operator, code akan lebih mudah dimaintain dan intent lebih jelas.

Operator dari RxJS cukup banyak, untuk kebutuhan demo, kita akan gunakan operator map, yang berguna untuk melakukan mengubah data dengan menambahkan kata ‘Interval ke: ‘.

Untuk menggunakan operator, kita harus import librarynya.

import {filter} from 'rxjs/operators';

Untuk menambahkan operator pada observable digunakan method pipe().

customInterval
.pipe(map(data=>{
  return 'Interval ke: ' + data;
}));

Berikut code lengkapnya pada file home.component.ts

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

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

  constructor() { }

  ngOnInit() {
    const customInterval = new Observable(observer =>{
      let count = 0;
      setInterval(()=> {
        observer.next(count);

        if (count ===4){
          observer.complete();
        }

        if (count > 6){
          observer.error(new Error('Count lebih besar dari 6'));
        }
        count = count + 2 ;
      }, 1000);
    });

    
    //menggunakan operator map
    this.mySubcription = customInterval
      .pipe(map(data=>{
        return 'Interval ke: ' + data;
      }))
      .subscribe(_count=>{
        console.log(_count);
      }, err =>{
        console.log(err);
        alert(err.message);
      }, () =>{
        console.log("Inteval complete");
      });
    }

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

Sesuai ekspektasi, sekarang data yang diemit sudah ditambahkan kata Interval ke:

Untuk dokumentasi operators dapat dilihat di RxJS Operators.