Menggunakan Subject Dalam Project Buku Resep

Seperti yang sudah dipelajari dalam modul Observable, aplikasi dapat kita tingkatkan dengan mengubah eventEmitter menggunakan Observable.

Buka file shopping-list.service.ts, kita ganti code eventEmitter menggunakan Subject.

//diganti menggunakan subject
//import { EventEmitter } from "@angular/core";
import { Subject } from "rxjs";
import { Ingredient } from "../shared/ingredient.model";

export class ShoppingListService{
    //diganti menggunakan subject
    //newInggredientAdded = new EventEmitter<Ingredient[]>();
    newInggredientAdded = new Subject<Ingredient[]>();

    private ingredients : Ingredient[] = [
        new Ingredient("Oreo", 1),
        new Ingredient("Tepung", 1),
      ];    

    getIngredients(){
        return this.ingredients.slice();
    }

    addIngredient(ingredient : Ingredient){
        this.ingredients.push(ingredient);
        //diganti menggunakan subject
        this.newInggredientAdded.next(this.ingredients.slice());
    }

    addIngredients(ingredients: Ingredient[]){
        this.ingredients.push(...ingredients);
        //diganti menggunakan subject
        this.newInggredientAdded.next(this.ingredients.slice());
    }
}

Kemudian buka file shopping-list.component.ts, modifikasi dengan menambahkan

• Library import untuk subscription.
• Inisialisasi local variable untuk menyimpan data subscription.
• Lakukan proses unsubscribe ketika componen di destroy.

import { Component, OnDestroy, OnInit } from '@angular/core';
//import modul subscription (jika IDE tidak otomatis melakukan penambahan)
import { Subscription } from 'rxjs';

import { Ingredient } from '../shared/ingredient.model';
import { ShoppingListService } from './shopping-list.service';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit, OnDestroy {
  ingredients! : Ingredient[];
  //local variable untuk menyimpan data subscription
  private ingSub! : Subscription;

  constructor(private shoppingListServ : ShoppingListService) { }

  ngOnInit(): void {
    this.ingredients = this.shoppingListServ.getIngredients();
    //store subcription kedalam local variable
    this.ingSub = this.shoppingListServ.newInggredientAdded.subscribe(
      (ingredients: Ingredient[]) =>{this.ingredients = ingredients;}
    );
  }

  //handling untuk unsubscribe subcription 
  ngOnDestroy(): void {
    this.ingSub.unsubscribe()
  }
}

Pastikan aplikasi berjalan dengan baik setelah dilakukan perubahan diatas.