diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.html b/src/app/recipes/recipe-edit/recipe-edit.component.html
index f03899f..56bf343 100644
--- a/src/app/recipes/recipe-edit/recipe-edit.component.html
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.html
@@ -76,7 +76,10 @@
                 formControlName="amount">
             </div>
             <div class="col-xs-2">
-              <button class="btn btn-danger">x</button>
+              <button
+                type="button"
+                class="btn btn-danger"
+                (click)="onDeleteIngredient(i)">X</button>
             </div>
           </div>
           <hr>
diff --git a/src/app/recipes/recipe-edit/recipe-edit.component.ts b/src/app/recipes/recipe-edit/recipe-edit.component.ts
index 7bab17c..1467b0c 100644
--- a/src/app/recipes/recipe-edit/recipe-edit.component.ts
+++ b/src/app/recipes/recipe-edit/recipe-edit.component.ts
@@ -50,6 +50,10 @@ export class RecipeEditComponent implements OnInit {
     )
   }
 
+  onDeleteIngredient(index: number) {
+    (<FormArray>this.recipeForm.get('ingredients')).removeAt(index);
+  }
+
   onCandel() {
     this.router.navigate(['../'], {relativeTo: this.route});
   }
diff --git a/src/app/recipes/recipe-list/recipe-list.component.ts b/src/app/recipes/recipe-list/recipe-list.component.ts
index 3652b0b..2fa3176 100644
--- a/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/src/app/recipes/recipe-list/recipe-list.component.ts
@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 
 import { Recipe } from '../recipe.model';
 import { RecipeService } from '../recipe.service';
+import { Subscription } from 'rxjs/Subscription';
 
 
 @Component({
@@ -10,7 +11,8 @@ import { RecipeService } from '../recipe.service';
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.css']
 })
-export class RecipeListComponent implements OnInit {
+export class RecipeListComponent implements OnInit, OnDestroy {
+  subscription: Subscription;
   recipes: Recipe[];
 
   constructor(private recipeService: RecipeService,
@@ -18,7 +20,7 @@ export class RecipeListComponent implements OnInit {
               private route: ActivatedRoute) { }
 
   ngOnInit() {
-    this.recipeService.recipesChanged.subscribe(
+    this.subscription = this.recipeService.recipesChanged.subscribe(
       (recipes: Recipe[]) => {
         this.recipes = recipes;
       }
@@ -29,4 +31,8 @@ export class RecipeListComponent implements OnInit {
   onNewRecipe() {
     this.router.navigate(['new'], {relativeTo: this.route});
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
 }