Menggunakan Service Pada Project Buku Resep – Part 3a

Pada modul ini kita akan melakukan passing data antara Service. Sebelumnya, kita lakukan penambahan ingredient pada recipe.

Buka file recipe.model.ts, lalu tambahkan field ingredients.

import { Ingredient } from "../shared/ingredient.model";

export class Recipe{
    public name: string;
    public description: string;
    public imgPath: string;
    public ingredients : Ingredient;
    
    constructor(name:string, desc:string, imgPath:string, ingredients:Ingredient){
        this.name = name;
        this.description = desc;
        this.imgPath = imgPath;
        this.ingredients = ingredients;
    }
}

selanjutnya tambahkan data ingredients pada recipe.service.ts,

import { EventEmitter } from "@angular/core";
import { Ingredient } from "../shared/ingredient.model";
import { Recipe } from "./recipe.model";

export class RecipeService{
    recipeSelected = new EventEmitter<Recipe>();

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

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

Berikutnya kita ubah file recipe-detail.component.html, ubah bagian ingredient menggunakan *ngFor.

<div class="row">
    <div class="col-xs-12">
        <img [src]="recipe.imgPath" alt="{{recipe.name}}" class="img-fluid" style="max-height:240px;">
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <h1>{{recipe.name}}</h1>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="dropdown" appDropDown>
            <a class="btn btn-primary dropdown-toggle" href="#" role="button" data-toggle="dropdown">Manage Recipe</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Add Shopping List</a>
              <a class="dropdown-item" href="#">Edit Recipe</a>
              <a class="dropdown-item" href="#">Delete Recipe</a>
            </div>
          </div>        
    </div>
</div>
<div class="row">
    <div class="col-xs-12">{{recipe.description}}</div>
</div>
<div class="row">
    <div class="col-xs-12">
        <ul class="list-group">
            <li class="list-group-item" *ngFor="let ingredient of recipe.ingredients">
                {{ingredient.name}} - {{ingredient.amount}}
            </li>
        </ul>
    </div>
</div>

Sesuai ekspektasi, recipe sudah menampilkan ingredient. Pada modul berikutnya kita akan menambahkan fungsi add to shopping list dengan menggunakan komunikasi antar service.