From 776ad68f873653d6ac358465dc777948bf4ae4a7 Mon Sep 17 00:00:00 2001
From: francesco <fra.rauseo@gmail.com>
Date: Tue, 14 Dec 2021 11:34:32 +0100
Subject: [PATCH] Passing Recipe Data with property binding

---
 project/src/app/app.component.html            |  6 +++---
 project/src/app/app.component.ts              |  5 +++++
 project/src/app/header/header.component.html  |  4 ++--
 project/src/app/header/header.component.ts    | 10 +++++-----
 .../recipe-item/recipe-item.component.html    | 18 ++++++++++++++---
 .../recipe-item/recipe-item.component.ts      |  4 +++-
 .../recipe-list/recipe-list.component.html    | 20 +++----------------
 7 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/project/src/app/app.component.html b/project/src/app/app.component.html
index e6bcc99..dab2166 100644
--- a/project/src/app/app.component.html
+++ b/project/src/app/app.component.html
@@ -1,9 +1,9 @@
-<app-header></app-header>
+<app-header (featureSelected)="onNavgate($event)"></app-header>
 <div class="container">
   <div class="row">
     <div class="col-md-12">
-      <app-recipes></app-recipes>
-      <app-shopping-list></app-shopping-list>
+      <app-recipes *ngIf="loadedFeature === 'recipe'"></app-recipes>
+      <app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
     </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/project/src/app/app.component.ts b/project/src/app/app.component.ts
index 7513378..06499a0 100644
--- a/project/src/app/app.component.ts
+++ b/project/src/app/app.component.ts
@@ -7,4 +7,9 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'project';
+  loadedFeature = 'recipe';
+
+  onNavgate(feature: string) {
+    this.loadedFeature = feature;
+  }
 }
diff --git a/project/src/app/header/header.component.html b/project/src/app/header/header.component.html
index bf6adff..9c8ddbc 100644
--- a/project/src/app/header/header.component.html
+++ b/project/src/app/header/header.component.html
@@ -5,8 +5,8 @@
         </div>
         <div class="navbar-default">
             <ul class="nav navbar-nav">
-                <li><a href="#">Recipe</a></li>
-                <li><a href="#">Shopping List</a></li>
+                <li><a href="#" (click)="onSelect('recipe')">Recipe</a></li>
+                <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                 <li class="dropdown">
diff --git a/project/src/app/header/header.component.ts b/project/src/app/header/header.component.ts
index a093fe7..91e6ec5 100644
--- a/project/src/app/header/header.component.ts
+++ b/project/src/app/header/header.component.ts
@@ -1,15 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.css']
 })
-export class HeaderComponent implements OnInit {
+export class HeaderComponent {
+  @Output() featureSelected = new EventEmitter<string>();
 
-  constructor() { }
-
-  ngOnInit(): void {
+  onSelect(feature: string) {
+    this.featureSelected.emit(feature);
   }
 
 }
diff --git a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
index e819b71..2a0caf3 100644
--- a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
+++ b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
@@ -1,3 +1,15 @@
-<p>
-  recipe-item works!
-</p>
+<a
+href="#"
+class="list-group-item clearfix">
+  <div class="pull-left">
+    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
+    <p class="list-group-item-text">{{ recipe.description }}</p>
+  </div>
+  <span class="pull-right">
+    <img
+      [src]="recipe.imagePath"
+      alt="{{ recipe.name }}"
+      class="img-responsive"
+      style="max-height: 50px;">
+  </span>
+</a>
\ No newline at end of file
diff --git a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
index 6da52d7..937b97b 100644
--- a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
+++ b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Recipe } from '../../recipe.model';
 
 @Component({
   selector: 'app-recipe-item',
@@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./recipe-item.component.css']
 })
 export class RecipeItemComponent implements OnInit {
+  @Input() recipe: Recipe;
 
   constructor() { }
 
diff --git a/project/src/app/recipes/recipe-list/recipe-list.component.html b/project/src/app/recipes/recipe-list/recipe-list.component.html
index 33796fa..acc2826 100644
--- a/project/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/project/src/app/recipes/recipe-list/recipe-list.component.html
@@ -6,23 +6,9 @@
 <hr>
 <div class="row">
   <div class="col-xs-12">
-    <a
-      href="#"
-      class="list-group-item clearfix"
-      *ngFor="let recipe of recipes">
-      <div class="pull-left">
-        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
-        <p class="list-group-item-text">{{ recipe.description }}</p>
-      </div>
-      <span class="pull-right">
-        <img
-          [src]="recipe.imagePath"
-          alt="{{ recipe.name }}"
-          class="img-responsive"
-          style="max-height: 50px;">
-      </span>
-    </a>
-    <app-recipe-item></app-recipe-item>
+    <app-recipe-item 
+      *ngFor="let recipeElement of recipes"
+      [recipe]="recipeElement"></app-recipe-item>
   </div>
 </div>