From c40cbdc10de10ea5383a4e8d3fb5369ece6b5a41 Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils@dittberner.it>
Date: Tue, 21 Nov 2017 17:25:13 +0100
Subject: [PATCH] 10-106 Use cross component communication for selecting recipe

---
 .../recipes/recipe-list/recipe-item/recipe-item.component.ts   | 10 +++++-----
 src/app/recipes/recipe-list/recipe-list.component.ts           |  8 +-------
 src/app/recipes/recipe.service.ts                              |  3 +++
 src/app/recipes/recipes.component.html                         |  3 +--
 src/app/recipes/recipes.component.ts                           |  7 ++++++-
 5 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
index 00763c0..8d7304e 100644
--- a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
+++ b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { Recipe } from '../../recipe.model';
+import { RecipeService } from '../../recipe.service';
 
 @Component({
   selector: 'app-recipe-item',
@@ -8,15 +9,14 @@ import { Recipe } from '../../recipe.model';
 })
 export class RecipeItemComponent implements OnInit {
   @Input() recipe: Recipe;
-  @Output() recipeSelected = new EventEmitter<void>();
-
-  constructor() { }
+  
+  constructor(private recipeService: RecipeService) { }
 
   ngOnInit() {
   }
 
   onSelected() {
-    this.recipeSelected.emit();
+    this.recipeService.recipeSelected.emit(this.recipe);
   }
 
 }
diff --git a/src/app/recipes/recipe-list/recipe-list.component.ts b/src/app/recipes/recipe-list/recipe-list.component.ts
index ac791f9..094cedd 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Recipe } from '../recipe.model';
 import { RecipeService } from '../recipe.service';
 
@@ -9,16 +9,10 @@ import { RecipeService } from '../recipe.service';
 })
 export class RecipeListComponent implements OnInit {
   recipes: Recipe[];
-  @Output() recipeWasSelected = new EventEmitter<Recipe>();
 
   constructor(private recipeService: RecipeService) { }
 
   ngOnInit() {
     this.recipes = this.recipeService.getRecipes();
   }
-
-  onRecipeSelected(recipe: Recipe) {
-    this.recipeWasSelected.emit(recipe);
-  }
-
 }
diff --git a/src/app/recipes/recipe.service.ts b/src/app/recipes/recipe.service.ts
index 429dd94..ec6b49c 100644
--- a/src/app/recipes/recipe.service.ts
+++ b/src/app/recipes/recipe.service.ts
@@ -1,6 +1,9 @@
 import { Recipe } from "./recipe.model";
+import { EventEmitter } from "@angular/core";
 
 export class RecipeService {
+    recipeSelected = new EventEmitter<Recipe>();
+
     private recipes: Recipe[] = [
         new Recipe('A Test Recipe', 'This is simlpy a test', 'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg'),
         new Recipe('Another Test Recipe', 'This is simlpy a test', 'http://maxpixel.freegreatpicture.com/static/photo/1x/Recipe-Soup-Noodle-Curried-Spicy-Chicken-Khaosoi-2344152.jpg')
diff --git a/src/app/recipes/recipes.component.html b/src/app/recipes/recipes.component.html
index c49fcba..d7a2176 100644
--- a/src/app/recipes/recipes.component.html
+++ b/src/app/recipes/recipes.component.html
@@ -1,7 +1,6 @@
 <div class="row">
   <div class="col-md-5">
-    <app-recipe-list
-      (recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
+    <app-recipe-list></app-recipe-list>
   </div>
   <div class="col-md-7">
     <app-recipe-detail
diff --git a/src/app/recipes/recipes.component.ts b/src/app/recipes/recipes.component.ts
index 25177ae..d141413 100644
--- a/src/app/recipes/recipes.component.ts
+++ b/src/app/recipes/recipes.component.ts
@@ -12,9 +12,14 @@ import { RecipeService } from './recipe.service';
 export class RecipesComponent implements OnInit {
   selectedRecipe: Recipe;
 
-  constructor() { }
+  constructor(private recipeService: RecipeService) { }
 
   ngOnInit() {
+    this.recipeService.recipeSelected.subscribe(
+      (recipe: Recipe) => {
+        this.selectedRecipe = recipe;
+      }
+    );
   }
 
 }