Membuat template Recipe Detail

Pada modul ini kita akan membuat template dari component recipe-detail.

Saat ini template masih berupa hardcode, sebagai ide tampilan dahulu.

<div class="row">
    <div class="col-xs-12">
        <img src="" alt="" class="img-fluid">
    </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">
        Description
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        Description
    </div>
</div>

Setelah ditambahkan recipe detail, tampilan kurang lebih seperti gambar diatas.

Tujuannya, saat recipe dipilih, recipe detail akan ditampilkan.

Untuk melakukan hal tersebut diperlukan komunikasi antar component, kita akan bahas komunikasi data antara component recipe-list dan recipe-detail pada modul terpisah.