max-64 g-18

src/app/recipes/recipe-detail/recipe-detail.component.html

@@ -1 +1,32 @@
-<p>recipe-detail works!</p>
+<div class="row">
+  <div class="col-xs-12">
+    <img src="" alt="" class="img-responsive">
+  </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">Manage Recipe <span class="caret"></span></button>
+      <ul class="dropdown-menu">
+        <li><a href="#">To Shopping List</a></li>
+        <li><a href="#">Edit Recipe</a></li>
+        <li><a href="#">Delete Recipe</a></li>
+      </ul>
+    </div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    Description
+  </div>
+</div>
+<div class="row">
+  <div class="col-xs-12">
+    Ingredients
+  </div>
+</div>

src/app/recipes/recipe-list2/recipe-list2.component.html

@@ -1 +1,23 @@
-<app-recipe-item></app-recipe-item>
+<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">
+      <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>
+    </div>
+</div>

src/app/recipes/recipe-list2/recipe-list2.component.ts

@@ -1,15 +1,21 @@
 import { Component, OnInit } from '@angular/core';
+import { Recipe } from '../recipe.model';
 
 @Component({
-  selector: 'app-recipe-list2',
-  templateUrl: './recipe-list2.component.html',
-  styleUrls: ['./recipe-list2.component.css']
+  selector: "app-recipe-list2",
+  templateUrl: "./recipe-list2.component.html",
+  styleUrls: ["./recipe-list2.component.css"]
 })
 export class RecipeList2Component implements OnInit {
+  recipes: Recipe[] = [
+    new Recipe(
+      "A Test Recipe",
+      "This is simply a test",
+      "https://food.fnr.sndimg.com/content/dam/images/food/fullset/2018/9/26/0/FNK_Tuscan-Chicken-Skillet_H2_s4x3.jpg"
+    )
+  ];
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

src/app/recipes/recipe.model.ts

@@ -0,0 +1,11 @@
+export class Recipe {
+  public name: string;
+  public description: string;
+  public imagePath: string;
+
+  constructor(name: string, desc: string, imagePath: string) {
+    this.name = name;
+    this.description = desc;
+    this.imagePath = imagePath;
+  }
+}

src/app/shared/ingredient.model.ts

@@ -0,0 +1,6 @@
+export class Ingredient {
+
+  constructor(public name: string, public amount: number) {
+
+  }
+}

src/app/shopping-list/shopping-edit/shopping-edit.component.html

@@ -1 +1,23 @@
-<p>shopping-edit works!</p>
+<div class="row">
+  <div class="col-xs-12">
+    <form>
+      <div class="row">
+        <div class="col-sm-5 form-group">
+          <label for="name">Name</label>
+          <input type="text" id="name" class="form-control">
+        </div>
+        <div class="col-sm-2 form-group">
+          <label for="amount">Amount</label>
+          <input type="number" id="amount" class="form-control">
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <button class="btn btn-success" type="submit">Add</button>
+          <button class="btn btn-danger">Delete</button>
+          <button class="btn btn-primary">Clear</button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>

src/app/shopping-list/shopping-list.component.html

@@ -2,6 +2,12 @@
   <div class="col-xs-10">
     <app-shopping-edit></app-shopping-edit>
     <hr>
-    <p>The list</p>
+    <ul class="list-group">
+      <a 
+      class="list-group-item" 
+      style="cursor: pointer"
+      *ngFor="let ingredient of ingredients">
+    {{ ingredient.name }} ({{ ingredient.amount}})</a>
+    </ul>
   </div>
 </div>

src/app/shopping-list/shopping-list.component.ts

@@ -1,15 +1,18 @@
 import { Component, OnInit } from '@angular/core';
+import { Ingredient } from '../shared/ingredient.model';
 
 @Component({
-  selector: 'app-shopping-list',
-  templateUrl: './shopping-list.component.html',
-  styleUrls: ['./shopping-list.component.css']
+  selector: "app-shopping-list",
+  templateUrl: "./shopping-list.component.html",
+  styleUrls: ["./shopping-list.component.css"]
 })
 export class ShoppingListComponent implements OnInit {
+  ingredients: Ingredient[] = [
+    new Ingredient("Apples", 5),
+    new Ingredient("Tomatoes", 10)
+  ];
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }