From 6ee00813a25ec38a77edb23ed57c84aaffc68071 Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils@dittberner.it>
Date: Mon, 20 Nov 2017 19:59:55 +0100
Subject: [PATCH] 03-47 Using model, fixed error in templates

---
 .../recipe-item/recipe-item.component.html         |  5 ++++-
 .../recipes/recipe-list/recipe-list.component.html | 22 +++++++++++++++++++---
 .../recipes/recipe-list/recipe-list.component.ts   |  5 ++++-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
index 2a6afda..fb955c4 100644
--- a/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
+++ b/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
@@ -1 +1,4 @@
-<app-recipe-item></app-recipe-item>
\ No newline at end of file
+<p>
+    recipe-item works!
+</p>
+      
\ No newline at end of file
diff --git a/src/app/recipes/recipe-list/recipe-list.component.html b/src/app/recipes/recipe-list/recipe-list.component.html
index 69d09c9..bcd074c 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/src/app/recipes/recipe-list/recipe-list.component.html
@@ -1,3 +1,19 @@
-<p>
-  recipe-list works!
-</p>
+<div class="row">
+  <div class="col-xs-12">
+    <button class="btn btn-success">New Recipe</button>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    <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">Description</p>
+      </div>
+      <span class="pull-right">
+        <img src="" alt="" class="img-responsive" style="max-height: 50px;">
+      </span>
+    </a>
+    <app-recipe-item></app-recipe-item>
+  </div>
+</div>
diff --git a/src/app/recipes/recipe-list/recipe-list.component.ts b/src/app/recipes/recipe-list/recipe-list.component.ts
index 5f453a8..d8b65c1 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Recipe } from '../recipe.model';
 
 @Component({
   selector: 'app-recipe-list',
@@ -6,7 +7,9 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./recipe-list.component.css']
 })
 export class RecipeListComponent implements OnInit {
-  recipes = [];
+  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')
+  ];
 
   constructor() { }