Restruktur Component Recipe – 1 – Menggunakan Parent-Child Input Binding

Pada modul ini kita akan melakukan restruktur component recipe-list dan recipe-item.

Saat ini component recipe-list memuat code recipe-item. Kita akan pindahkan kode tersebut ke component recipe-item.

Disini kita akan kembali menggunakan data passing antar komponent.

Buka file recipe-item.component.html, isi dengan code yang di-cut dari file recipe-list.component.html

<a href="#" class="list-group-item clearfix">
    <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>

Buka file recipe-list.component.html, ubah code menjadi seperti dibawah.

Data Binding dari Parent ke child component dengan menggunakan property binding.

<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"></app-recipe-item>
    </div>
</div>

Kemudian buka file recipe-detail.component.ts, ubah code seperti berikut

//tambahkan import modul Input dan Recipe bila tidak ditambahkan otomatis oleh ID
import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../../recipe.model';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {
  //data binding dari recipe-list.component.html
  @Input() recipe!: Recipe;

  constructor() {}

  ngOnInit(): void {
  }

}

Untuk dokumentasi component interaction dapat dilihat disini.