| @@ -17,7 +17,7 @@ | |||||
| Manage Recipe <span class="caret"></span> | Manage Recipe <span class="caret"></span> | ||||
| </button> | </button> | ||||
| <ul class="dropdown-menu"> | <ul class="dropdown-menu"> | ||||
| <li><a href="#">Add Ingredients</a></li> | |||||
| <li><a (click)="onAddToShoppingList()" style="cursor: pointer;">Add Ingredients</a></li> | |||||
| <li><a href="#">Edit Recipe</a></li> | <li><a href="#">Edit Recipe</a></li> | ||||
| <li><a href="#">Delete Recipe</a></li> | <li><a href="#">Delete Recipe</a></li> | ||||
| </ul> | </ul> | ||||
| @@ -31,6 +31,12 @@ | |||||
| </div> | </div> | ||||
| <div class="row"> | <div class="row"> | ||||
| <div class="col-xs-12"> | <div class="col-xs-12"> | ||||
| Ingredients | |||||
| <ul class="list-group"> | |||||
| <li | |||||
| class="list-group-item" | |||||
| *ngFor="let ingredient of recipe.ingredients"> | |||||
| {{ ingredient.name }} - {{ ingredient.amount }} | |||||
| </li> | |||||
| </ul> | |||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| @@ -1,11 +1,15 @@ | |||||
| import { Ingredient } from "../shared/ingredient.model"; | |||||
| export class Recipe { | export class Recipe { | ||||
| public name: string; | public name: string; | ||||
| public description: string; | public description: string; | ||||
| public imagePath: string; | public imagePath: string; | ||||
| public ingredients: Ingredient[]; | |||||
| constructor(name: string, description: string, imagePath: string) { | |||||
| constructor(name: string, description: string, imagePath: string, ingredients: Ingredient[]) { | |||||
| this.name = name; | this.name = name; | ||||
| this.description = description; | this.description = description; | ||||
| this.imagePath = imagePath; | this.imagePath = imagePath; | ||||
| this.ingredients = ingredients; | |||||
| } | } | ||||
| } | } | ||||
| @@ -1,12 +1,29 @@ | |||||
| import { Recipe } from "./recipe.model"; | import { Recipe } from "./recipe.model"; | ||||
| import { EventEmitter } from "@angular/core"; | import { EventEmitter } from "@angular/core"; | ||||
| import { Ingredient } from "../shared/ingredient.model"; | |||||
| export class RecipeService { | export class RecipeService { | ||||
| recipeSelected = new EventEmitter<Recipe>(); | recipeSelected = new EventEmitter<Recipe>(); | ||||
| private recipes: 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') | |||||
| 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 Ingredient('Foo', 1), | |||||
| new Ingredient('Bar', 2) | |||||
| ] | |||||
| ), | |||||
| 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', | |||||
| [ | |||||
| new Ingredient('Foo', 1), | |||||
| new Ingredient('Bar', 2) | |||||
| ] | |||||
| ) | |||||
| ]; | ]; | ||||
| getRecipes() { | getRecipes() { | ||||