Project Setup Buku Resep – 2

Setelah component selesai dibuat, berikutnya adalah mengatur hubungan antar component.

Buka file app.component.html, akan berisi component header, recipes dan shopping list.

<!-- file: app.component.html -->

<app-header></app-header>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <app-recipes></app-recipes>
            <app-shopping-list></app-shopping-list>
        </div>
    </div>
</div>

Kemudian buka file recipes.component.html

recipes.component.html akan berisi component recipe-list dan recipe-detail.

<!-- file: recipes.component.html -->

<div class="row">
    <div class="col-md-5">
        <app-recipe-list></app-recipe-list>
    </div>
    <div class="col-md-7">
        <app-recipe-detail></app-recipe-detail>
    </div>
</div>

Selanjutnya adalah file recipe-list.component.html, akan berisi component recipe-item.

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

<app-recipe-item></app-recipe-item>

Kemudian buka file shopping-list.component.html, yang akan diisi component shopping-edit

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

<div class="row">
    <div class="col-xs-10">
        <app-shopping-edit></app-shopping-edit>
        <hr>
        <p>Shopping List</p>
    </div>
</div>

Berikutnya kita buat header, buka header.component.html. Pada header lebih ke topik HTML dan CSS Bootstrap, tidak akan dibahas.

Silakan lihat dokumentasi Navbar Bootstrap disini.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Buku Resep</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item"><a class="nav-link" href="#">Recipes</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Shopping List</a></li>
        </ul>
        <ul class="navbar-nav navbar-right">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Manage
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Save Data</a></li>
              <li><a class="dropdown-item" href="#">Get Data</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Berikut tampilan layout dasar setelah perubahan yang kita lakukan diatas.