diff --git a/package-lock.json b/package-lock.json
index b901a36..503bfcc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,7 +81,7 @@
         "memory-fs": "0.4.1",
         "minimatch": "3.0.4",
         "node-modules-path": "1.0.1",
-        "node-sass": "4.7.1",
+        "node-sass": "4.7.2",
         "nopt": "4.0.1",
         "opn": "5.1.0",
         "portfinder": "1.0.13",
@@ -326,9 +326,9 @@
       }
     },
     "ajv": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.3.0.tgz",
-      "integrity": "sha1-RBT/dKUIecII7l/cgm4ywwNUnto=",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.4.0.tgz",
+      "integrity": "sha1-MtHPCNvIDEMvQm8S4QslEfa0ZHQ=",
       "dev": true,
       "requires": {
         "co": "4.6.0",
@@ -587,7 +587,7 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000766",
+        "caniuse-db": "1.0.30000769",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "5.2.18",
@@ -1002,7 +1002,7 @@
       "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
       "dev": true,
       "requires": {
-        "caniuse-db": "1.0.30000766",
+        "caniuse-db": "1.0.30000769",
         "electron-to-chromium": "1.3.27"
       }
     },
@@ -1107,15 +1107,15 @@
       "dev": true,
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000766",
+        "caniuse-db": "1.0.30000769",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000766",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000766.tgz",
-      "integrity": "sha1-TJEao3R/ATiEUvpLknt4/PFDBoA=",
+      "version": "1.0.30000769",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000769.tgz",
+      "integrity": "sha1-wjC5wbno2z4cDYWMluaFdBuWzBA=",
       "dev": true
     },
     "caseless": {
@@ -5315,9 +5315,9 @@
       "dev": true
     },
     "node-sass": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.1.tgz",
-      "integrity": "sha512-WUG10FNj6E3bXpAy7f3bXVdLVUJuNn8pRbT4oo5ez9Zp5ZfqPFKsVJuDEEUmkpdyGa8P9JwifEr5dhNgZT2FpQ==",
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
+      "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -7317,7 +7317,7 @@
       "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
       "dev": true,
       "requires": {
-        "ajv": "5.3.0"
+        "ajv": "5.4.0"
       }
     },
     "scss-tokenizer": {
@@ -8741,7 +8741,7 @@
       "requires": {
         "acorn": "5.2.1",
         "acorn-dynamic-import": "2.0.2",
-        "ajv": "5.3.0",
+        "ajv": "5.4.0",
         "ajv-keywords": "2.1.1",
         "async": "2.6.0",
         "enhanced-resolve": "3.4.1",
diff --git a/package.json b/package.json
index dc6483d..33030f9 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.2",
+    "@angular/cli": "^1.5.2",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
     "@types/jasmine": "~2.5.53",
diff --git a/src/app/recipes/recipe-detail/recipe-detail.component.ts b/src/app/recipes/recipe-detail/recipe-detail.component.ts
index 153c140..95606f3 100644
--- a/src/app/recipes/recipe-detail/recipe-detail.component.ts
+++ b/src/app/recipes/recipe-detail/recipe-detail.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Recipe } from '../recipe.model';
+import { RecipeService } from '../recipe.service';
 
 @Component({
   selector: 'app-recipe-detail',
@@ -9,9 +10,13 @@ import { Recipe } from '../recipe.model';
 export class RecipeDetailComponent implements OnInit {
   @Input() recipe: Recipe;
   
-  constructor() { }
+  constructor(private recipeService: RecipeService) { }
 
   ngOnInit() {
   }
 
+  onAddToShoppingList() {
+    this.recipeService.addIngredientsToShoppingList(this.recipe.ingredients);
+  }
+
 }
diff --git a/src/app/recipes/recipe.service.ts b/src/app/recipes/recipe.service.ts
index f779ab8..69a9462 100644
--- a/src/app/recipes/recipe.service.ts
+++ b/src/app/recipes/recipe.service.ts
@@ -1,7 +1,9 @@
 import { Recipe } from "./recipe.model";
-import { EventEmitter } from "@angular/core";
+import { EventEmitter, Injectable } from "@angular/core";
 import { Ingredient } from "../shared/ingredient.model";
+import { ShoppingListService } from "../shopping-list/shopping-list.service";
 
+@Injectable()
 export class RecipeService {
     recipeSelected = new EventEmitter<Recipe>();
 
@@ -26,7 +28,13 @@ export class RecipeService {
         )
     ];
 
+    constructor(private shoppingListService: ShoppingListService) { }
+
     getRecipes() {
         return this.recipes.slice();
     }
+
+    addIngredientsToShoppingList(ingredients: Ingredient[]) {
+        this.shoppingListService.addIngredients(ingredients);
+    }
 }
\ No newline at end of file
diff --git a/src/app/shopping-list/shopping-list.service.ts b/src/app/shopping-list/shopping-list.service.ts
index 5c17c7f..fa174ee 100644
--- a/src/app/shopping-list/shopping-list.service.ts
+++ b/src/app/shopping-list/shopping-list.service.ts
@@ -16,4 +16,9 @@ export class ShoppingListService {
         this.ingredients.push(ingredient);
         this.ingredientsChanged.emit(this.ingredients.slice());
     }
+
+    addIngredients(ingredients: Ingredient[]) {
+        this.ingredients.push(...ingredients);
+        this.ingredientsChanged.emit(this.ingredients.slice());
+    }
 }
\ No newline at end of file