Membuat Model Ingredient dan Menggunakannya Pada Component

Model ingredient akan digunakan oleh component recipe dan shopping, oleh karena itu pada tutorial digunakan pendekatan membuat folder baru app/shared. Dimana folder ini akan berisi file-file yang digunakan oleh berbagai component berbeda.

Perhatian: pendekatan diatas tidak mutlak, Anda bebas menggunakan struktur file sendiri.

Buat folder app/shared, kemudian buat file baru dengan nama ingredient.model.ts

export class Ingredient{
    public name: string;
    public amout: number;

    constructor(name: string, amount:number){
        this.name = name;
        this.amout = amount;
    }
}

Perhatian, penulisan code diatas dapat disingkat menjadi seperti dibawah (ini adalah fitur dari TypeScript).

export class Ingredient{
    constructor(public name: string, public amount:number){}
}

Berikutnya kita gunakan model diatas pada component shopping-list.

Buka file shopping-list.component.ts, lalu tambahkan code untuk inisialisasi ingredients. (lihat bagian komentar).

Perhatian: sama seperti recipe model, saat ini data masih hardcode. Akan ada modul terpisah untuk menggunakan database.

import { Component, OnInit } from '@angular/core';
//import ingredient model
import { Ingredient } from '../shared/ingredient.model';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit {
  //menggunaan ingredient model
  ingredients : Ingredient[] = [
    new Ingredient("Oreo", 1),
    new Ingredient("Tepung", 1),
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

Setelah insialisasi, ingredient dapat kita gunakan pada shopping-list.component.html.

<div class="row">
    <div class="col-xs-10">
        <app-shopping-edit></app-shopping-edit>
        <hr>
        <ul class="list-group">
            <a class="list-group-item" style="cursor:pointer" *ngFor="let ingredient of ingredients">
                {{ingredient.name}} ({{ingredient.amount}})
            </a>
        </ul>
    </div>
</div>

Berikutnya kita akan tambahkan form pada component shopping-edit, buka file shopping-edit.component.html.

Untuk saat ini masih berupa tampilan saja, belum fungsional. Kita akan bahas pada modul terpisah.

<div class="row">
    <div class="col-xs-12">
        <form>
            <div class="row">
                <div class="col-sm-5 form-group">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" id="name">
                </div>
                <div class="col-sm-2 form-group">
                    <label for="amount" class="form-label">Amount</label>
                    <input type="number" class="form-control" id="amount">
                </div>            
            </div>
            <div class="row mt-2">
                <div class="col-xs-12">
                    <button class="btn btn-success me-1" type="submit">Add</button>
                    <button class="btn btn-danger me-1" type="button">Del</button>
                    <button class="btn btn-primary" type="button">Clear</button>
                </div>
            </div>
        </form>
    </div>
</div>

Sampai disini, berikut tampilan sementara dari Aplikasi Buku Resep.