Menggunakan Service Pada Project Buku Resep – Part 1

Pada modul ini kita akan melakukan code refactoring, memindahkan data recipe ke service.

Buat file baru pada recipes/recipe.service.ts,

Code yang ditambahkan adalah

• Buat class RecipeService, kemudian pindahkan data recipe hardcode dari shopping-list.component.ts.
• Buat method getRecipes() untuk mengakses data recipe.

import { Recipe } from "./recipe.model";

export class RecipeService{
    private recipes: Recipe[] = [
        new Recipe('Oreo Dorayaki 1', 'Doriyaki dengan bahan utama Oreo', 'https://i.ytimg.com/vi/nJGmdqb892Y/maxresdefault.jpg' ),
        new Recipe('Oreo Dorayaki 2', 'Doriyaki dengan bahan utama Oreo', 'https://i.ytimg.com/vi/nJGmdqb892Y/maxresdefault.jpg' )
      ];

    getRecipes(){
        return this.recipes.slice();
    }
}

Kemudian buka file recipes.component.ts, disini kita lakukan registrasi RecipeService. (lihat bagian comment).

import { Component, OnInit, Input} from '@angular/core';
import { Recipe } from './recipe.model';
//tambahkan untuk registrasi service
import { RecipeService } from './recipe.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  providers: [RecipeService] //tambahkan untuk registrasi service
})
export class RecipesComponent implements OnInit {
  @Input() recipeSelected! : Recipe;

  constructor() { }

  ngOnInit(): void {
  }

   onRecipeSelected(recipe : Recipe){
     this.recipeSelected = recipe;
   }
}

Karena service sudah diregistrasikan di parent component (recipes.component.ts), kita bisa gunakan pada child component (recipe-list.component.ts).

Kemudian buka file recipe-list.component.ts, perubahan yang dilakukan adalah:

• Membuang data hardcode recipes dari module sebelumnya.
• Membaca data dari service.

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Recipe } from '../recipe.model';
import { RecipeService } from '../recipe.service'; // RecipeService

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {
  @Output() recipeSelected = new EventEmitter<Recipe>();

  // Data inisialisasi dibuang, akan diambil dari RecipeService
  recipes!: Recipe[];

  // akses RecipeService instance
  constructor(private recipeService: RecipeService) { }

  ngOnInit(): void {
    //baca data dari RecipeService menggunakan method getRecipes.
    this.recipes = this.recipeService.getRecipes();
  }

  onSelect(recipe: Recipe){
    this.recipeSelected.emit(recipe);
  }
}

Sesuai ekspektasi, aplikasi buku resep tetap berjalan seperti sebelumnya. Perbedaannya sekarang data sudah disediakan lewat RecipeService.

Pada modul selanjutnya kita akan tambahkan fitur RecipeService untuk handling event ketika recipe dipilih.