Restruktur Component Recipe – 2 – Menggunakan Custom Event Binding

Pada modul ini kita akan restruktur component recipe-list. Tujuannya adalah ketika item recipe di-click, recipe detail akan ditampilkan.

Pendekatan yang dilakukan adalah sama seperti yang sudah dibahas pada modul navigasi, yaitu menggunakan custom event binding.

Buka file recipe-list.component.html, lalu tambahkan event binding (click)=”onSelect(recipeLoop)”

<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">
        <app-recipe-item *ngFor="let recipeLoop of recipes" 
            [recipe]="recipeLoop" 
            (click)="onSelect(recipeLoop)"
        >
        </app-recipe-item>
    </div>
</div>

Kemudian edit file recipe-list.component.ts, tambahkan method onSelect.

//tambahkan module Output jika IDE tidak otomatis melakukan import
import { Component, EventEmitter, OnInit, Output } 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 {
  //untuk event binding ketika recipe item dipilih
  @Output() recipeSelected = new EventEmitter<Recipe>();

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

  constructor() { }

  ngOnInit(): void {
  }
  //untuk event binding ketika recipe item dipilih
  onSelect(recipe: Recipe){
    this.recipeSelected.emit(recipe);
  }
}

Berikutnya adalah menangkap data yang di emit, pada parent component yaitu pada file recipe.component.html.

Data yang ditangkap diatas, pasing data ke recipe-detail.component dengan property binding

<div class="row">
    <div class="col-md-5">
        <!-- menangkap data dari recipe-list.component -->
        <app-recipe-list (recipeSelected)=" onRecipeSelected($event)"></app-recipe-list>
    </div>
    <div class="col-md-7">
        <!-- set recipe yang dipilih dengan property binding-->
        <app-recipe-detail 
        *ngIf="recipeSelected; else tempText"
        [recipe]="recipeSelected"
        >
    </app-recipe-detail>
    <ng-template #tempText><p>Please select recipe..</p></ng-template>
    </div>
</div>

Kemudian pada recipe.component.ts, tambahkan method untuk menangkap data custom event dari recipe-list.component

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

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css']
})
export class RecipesComponent implements OnInit {
  @Input() recipeSelected! : Recipe;

  constructor() { }

  ngOnInit(): void {
  }

   onRecipeSelected(recipe : Recipe){
     this.recipeSelected = recipe;
   }
}

Berikutnya edit file recipe-detail.component.ts, tambahkan property yang akan digunakan untuk menerima data dari recipe.component.

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

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.component.html',
  styleUrls: ['./recipe-detail.component.css']
})
export class RecipeDetailComponent implements OnInit {
  @Input() recipe! : Recipe;

  constructor() { }

  ngOnInit(): void {
  }
}

Berikutnya edit file recipe-detail.component.html, gunakan string interpolation untuk menggunakan property recipe diatas.

<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="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                Manage Recipe
            </button>
            <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Add to Shopping List</a></li>
                <li><a class="dropdown-item" href="#">Edit Recipe</a></li>
                <li><a class="dropdown-item" href="#">Delete Recipe</a></li>
              </ul>            
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">{{recipe.description}}</div>
</div>
<div class="row">
    <div class="col-xs-12">
        Ingredients
    </div>
</div>

Jika kita check pada browser, sesuai ekspektasi, menu detail akan ditampilkan sesuai recipe item yang dipilih.