From 5f271d124f745cd25b8863c19f0490e0ada9b788 Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils@dittberner.it>
Date: Tue, 21 Nov 2017 18:20:16 +0100
Subject: [PATCH] 10-108 Handling adding items to shoppinglist

---
 src/app/app.module.ts                                 |  3 ++-
 .../shopping-edit/shopping-edit.component.ts          |  8 ++++----
 src/app/shopping-list/shopping-list.component.html    |  3 +--
 src/app/shopping-list/shopping-list.component.ts      | 19 +++++++++----------
 src/app/shopping-list/shopping-list.service.ts        | 18 +++++++++++++++++-
 5 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index cecc330..a5759cf 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,6 +13,7 @@ import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-it
 import { ShoppingListComponent } from './shopping-list/shopping-list.component';
 import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
 import { DropdownDirective } from './shared/dropdown.directive';
+import { ShoppingListService } from './shopping-list/shopping-list.service';
 
 
 @NgModule({
@@ -32,7 +33,7 @@ import { DropdownDirective } from './shared/dropdown.directive';
 	  FormsModule,
     HttpModule
   ],
-  providers: [],
+  providers: [ShoppingListService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/src/app/shopping-list/shopping-edit/shopping-edit.component.ts b/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
index de8994b..8c42eca 100644
--- a/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
+++ b/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild, ElementRef, EventEmitter, Output } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Ingredient } from '../../shared/ingredient.model';
+import { ShoppingListService } from '../shopping-list.service';
 
 @Component({
   selector: 'app-shopping-edit',
@@ -9,9 +10,8 @@ import { Ingredient } from '../../shared/ingredient.model';
 export class ShoppingEditComponent implements OnInit {
   @ViewChild('nameInput') nameInputRef: ElementRef;
   @ViewChild('amountInput') amountInputRef: ElementRef;
-  @Output() ingredientAdded = new EventEmitter<Ingredient>();
 
-  constructor() { }
+  constructor(private shoppingListService: ShoppingListService) { }
 
   ngOnInit() {
   }
@@ -19,6 +19,6 @@ export class ShoppingEditComponent implements OnInit {
   onAddItem() {
     const newIngredient = new Ingredient(this.nameInputRef.nativeElement.value,
       this.amountInputRef.nativeElement.value);
-    this.ingredientAdded.emit(newIngredient);
+    this.shoppingListService.addIngredient(newIngredient);
   }
 }
diff --git a/src/app/shopping-list/shopping-list.component.html b/src/app/shopping-list/shopping-list.component.html
index c2cc788..78ab2f9 100644
--- a/src/app/shopping-list/shopping-list.component.html
+++ b/src/app/shopping-list/shopping-list.component.html
@@ -1,7 +1,6 @@
 <div class="row">
   <div class="col-xs-10">
-    <app-shopping-edit
-      (ingredientAdded)="onIngredientAdded($event)"></app-shopping-edit>
+    <app-shopping-edit></app-shopping-edit>
     <hr>
     <ul class="list-group">
       <a 
diff --git a/src/app/shopping-list/shopping-list.component.ts b/src/app/shopping-list/shopping-list.component.ts
index 1e2b35d..1ca7413 100644
--- a/src/app/shopping-list/shopping-list.component.ts
+++ b/src/app/shopping-list/shopping-list.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Ingredient } from '../shared/ingredient.model';
+import { ShoppingListService } from './shopping-list.service';
 
 @Component({
   selector: 'app-shopping-list',
@@ -7,18 +8,16 @@ import { Ingredient } from '../shared/ingredient.model';
   styleUrls: ['./shopping-list.component.css']
 })
 export class ShoppingListComponent implements OnInit {
-  ingredients: Ingredient[] = [
-    new Ingredient('Apples', 5),
-    new Ingredient('Tomatos', 10)
-  ];
+  ingredients: Ingredient[];
 
-  constructor() { }
+  constructor(private shoppingListService: ShoppingListService) { }
 
   ngOnInit() {
+    this.ingredients = this.shoppingListService.getIngredients();
+    this.shoppingListService.ingredientsChanged.subscribe(
+      (ingredients: Ingredient[]) => {
+        this.ingredients = ingredients;
+      }
+    );
   }
-
-  onIngredientAdded(ingredient: Ingredient) {
-    this.ingredients.push(ingredient);
-  }
-
 }
diff --git a/src/app/shopping-list/shopping-list.service.ts b/src/app/shopping-list/shopping-list.service.ts
index e2ad247..5c17c7f 100644
--- a/src/app/shopping-list/shopping-list.service.ts
+++ b/src/app/shopping-list/shopping-list.service.ts
@@ -1,3 +1,19 @@
+import { Ingredient } from "../shared/ingredient.model";
+import { EventEmitter } from "@angular/core";
+
 export class ShoppingListService {
-    
+    ingredientsChanged = new EventEmitter<Ingredient[]>();
+    private ingredients: Ingredient[] = [
+        new Ingredient('Apples', 5),
+        new Ingredient('Tomatoes', 10)
+    ];
+
+    getIngredients() {
+        return this.ingredients.slice();
+    }
+
+    addIngredient(ingredient: Ingredient) {
+        this.ingredients.push(ingredient);
+        this.ingredientsChanged.emit(this.ingredients.slice());
+    }
 }
\ No newline at end of file