16-218 Edit and delete recipes

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

@@ -19,7 +19,7 @@
       <ul class="dropdown-menu">
         <li><a (click)="onAddToShoppingList()" style="cursor: pointer;">Add Ingredients</a></li>
         <li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>
-        <li><a style="cursor: pointer;">Delete Recipe</a></li>
+        <li><a style="cursor: pointer;" (click)="onDelete()">Delete Recipe</a></li>
       </ul>
     </div>
   </div>

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

@@ -33,4 +33,9 @@ export class RecipeDetailComponent implements OnInit {
   onEditRecipe() {
     this.router.navigate(['edit'], {relativeTo: this.route});
   }
+
+  onDelete() {
+    this.recipeService.delteRecipe(this.id);
+    this.router.navigate(['/recipes']);
+  }
 }

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

@@ -4,7 +4,7 @@
       <div class="row">
         <div class="col-xs-12">
           <button type="submit" class="btn btn-success" [disabled]="!recipeForm.valid">Save</button>
-          <button type="button" class="btn btn-danger">Cancel</button>
+          <button type="button" class="btn btn-danger" (click)="onCandel()">Cancel</button>
         </div>
       </div>
       <div class="row">
@@ -29,14 +29,15 @@
               name="imagePath"
               id="imagePath"
               formControlName="imagePath"
-              class="form-control">
+              class="form-control"
+              #imagePath>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-xs-12">
           <img 
-            src="" 
+            [src]="imagePath.value" 
             alt="" 
             class="img-responsive">
         </div>

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

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { FormArray, FormGroup, FormControl, Validators } from '@angular/forms';
+
 import { RecipeService } from '../recipe.service';
-import { Recipe } from '../recipe.model';
 
 @Component({
   selector: 'app-recipe-edit',
@@ -15,7 +15,8 @@ export class RecipeEditComponent implements OnInit {
   recipeForm: FormGroup
 
   constructor(private route: ActivatedRoute,
-              private recipeService: RecipeService) { }
+              private recipeService: RecipeService,
+              private router: Router) { }
 
   ngOnInit() {
     this.route.params.subscribe(
@@ -37,6 +38,7 @@ export class RecipeEditComponent implements OnInit {
     } else {
       this.recipeService.addRecipe(this.recipeForm.value);
     }
+    this.router.navigate(['../'], {relativeTo: this.route});
   }
 
   onAddIngredient() {
@@ -48,6 +50,10 @@ export class RecipeEditComponent implements OnInit {
     )
   }
 
+  onCandel() {
+    this.router.navigate(['../'], {relativeTo: this.route});
+  }
+
   private initForm() {
     let recipeName = '';
     let recipeImagePath = '';

src/app/recipes/recipe.service.ts

@@ -51,4 +51,9 @@ export class RecipeService {
         this.recipes[index] = newRecipe;
         this.recipesChanged.next(this.recipes.slice());
     }
+
+    delteRecipe(index: number) {
+        this.recipes.splice(index, 1);
+        this.recipesChanged.next(this.recipes.slice());
+    }
 }