Membuat Recipe Model dan Implementasi Pada Component recipe-list

Recipe Model adalah class yang akan berisi stuktur data dari recipe.

Dibuat dalam class agar kita mempunyai blueprint, jadi kita bisa konsisten dalam struktur data dari recipe.

Buat file baru di folder recipes, dengan nama recipe.model.ts (penamaan bebas, disarankan nama harus deskriptif agar mudah dipahami).

//file: recipe.model.ts

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

Untuk saat ini, data yang akan digunakan masih hardcode. Nanti akan ada modul terpisah membahas penggunaan database.

Recipe model diatas akan kita gunakan pada component yang telah kita buat.

Buka file recipe-list.component.ts, lalu tambahkan code untuk deklarasi dan inisialisasi data recipe.

//file: recipe-list.component.ts

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

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {
  recipes: Recipe[] = [
    new Recipe('Oreo Dorayaki', 'Doriyaki dengan bahan utama Oreo', 'https://i.ytimg.com/vi/nJGmdqb892Y/maxresdefault.jpg' )
  ]

  constructor() { }

  ngOnInit(): void {
  }

}

Berikutnya kita gunakan data recipes diatas pada recipe-list.component.html

<!-- file: recipe-list.component.html -->


<div class="row">
    <div class="col-xs-12">
        <button class="btn btn-success">New Recipe</button>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
        <a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
            <div class="float-start">
                <h4 class="list-group-item-heading">{{recipe.name}}</h4>
                <p class="list-group-item-text">{{recipe.description}}</p>
            </div>
            <span class="float-end">
                <img src="{{recipe.imgPath}}" alt="" class="img-fluid" style="max-height: 50px;">
            </span>
        </a>
        <app-recipe-item></app-recipe-item>
    </div>
</div>

Jika dijalankan, berikut tampilan aplikasi buku resep sejauh ini.