title: angular 2 - pass 2 parameters to an EventEmitter
body: <p>My question is similar to that question: <a href="https://stackoverflow.com/questions/41003639/how-pass-2-parameters-to-eventemitter-angular2">How to pass 2 parameters to EventEmitter angular 2</a></p>
  
  <p>i've read the question and the answers, and followd the answer that seem to work for my case but it didnt work in my case.</p>
  
  <p>i need to pass 2 parameter from 2 different Inputs to an EventEmitter. Those 2 parameters would be added to an array in other component and the displayed in a list that will show the ingredient title and its amount.</p>
  
  <p>I can't figure out what's the problam here.</p>
  
  <p>this is component.ts where the EventEmitter is: </p>
  
  <p>and this is the html component from which i recive the 2 parameters:</p>
  
  <p>Let me try to explain my whole procces if it would help you understand and help me out.</p>
  
  <p>first i recive two inputs from 'shoppingListButtons.component.html' </p>
  
  <pre><code>   &lt;div class="container"&gt;
  &lt;form&gt;
      &lt;div class="form-group col-lg-4 col-md-3"&gt;
          &lt;label for="recipeName"&gt;{{inputTName}}&lt;/label&gt;
          &lt;input type="text" class="form-control" id="recipeName" [(ngModel)]="ingredientTitle" name="title"&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group col-lg-2 col-md-3"&gt;
          &lt;label for="recipeAmount"&gt;{{inputTAmount}}&lt;/label&gt;
          &lt;input type="text" class="form-control" id="recipeAmount" [(ngModel)]="ingredientAmount" name="amount"&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
       &lt;button class="btn btn-success" (click)="AddToShoppingList()"&gt;{{btnToAdd}}&lt;/button&gt;
      &lt;button class="btn btn-danger"&gt;{{btnDel}}&lt;/button&gt;
      &lt;button class="btn btn-primary" (click)="clear()"&gt;{{btnClr}}&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>then, these two inputs: 'ingredientTitle' and 'ingredientAmount' supposed to be passed to the EventEmitter that is in 'shoppingListButtons.component.ts'</p>
  
  <pre><code>import { Component, Input, Output, EventEmitter } from '@angular/core'
  
  @Component({
      selector: 'shoppingListButtons',
      templateUrl: './shoppingListButtons.component.html'
  
      })
      export class ShoppingListButtonComponent {
      @Input() buttonVar: string;
      @Input() buttonNew: string;
  
      @Input() inputTName: string;
      @Input() inputTAmount: number;
      @Input() btnToAdd: string;
      @Input() btnDel: string;
      @Input() btnClr: string;
  
      @Input() ingredientTitle: string;
      @Input() ingredientAmount: string;
  
      @Output() shoppingListChanged: EventEmitter&lt;any&gt; = new EventEmitter();
  
      AddToShoppingList() {
          this.shoppingListChanged.emit(this.ingredientTitle);
      }
  }
  </code></pre>
  
  <p>After that, the Emitter should pass the parameters to the method: 'AddIngredients' that is in 'shoppingList.component.ts'</p>
  
  <pre><code>export class ShoppingListComponent {
  
   constructor(private _shoppingListService: ShoppingListService) { }
  
   ingredientsList = this._shoppingListService.ingredientsShoppingList;
  
   listTitle: string;
   listAmount: number;
  
   AddIngredients(listTitle, listAmount) {
     this._shoppingListService.AddIngredients(listTitle, listAmount)
   }
  </code></pre>
  
  <p>That method is in a seperated service that hold an array in which i want to display it with ngFor in a different html component.</p>
  
  <p>the array:</p>
  
  <pre><code>@Injectable()
  export class ShoppingListService {
  
  ingredientsShoppingList: ShoppingListItem[] = [
  {Title:"Milk", Amount:3},
  {Title:"Cream", Amount: 2}, 
  {Title: "Peaches", Amount: 5}]
  
  
  AddIngredients(listTitle: string, listAmount: number){
    this.ingredientsShoppingList.push({Title: listTitle, Amount: listAmount})
  }
  
  GetIngredients(){
      return this.ingredientsShoppingList;
  }
  
  }
  </code></pre>
  
  <p>how i display my list in shoppingList.component.html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;h2&gt;Shopping List&lt;/h2&gt;
  &lt;shoppingListButtons (shoppingListChanged)="AddIngredients($event)" [inputTName]="inputTitleName" [inputTAmount]="inputTitleAmount"
    [btnToAdd]="btnAdd" [btnDel]="btnDelete" [btnClr]="btnClear"&gt;&lt;/shoppingListButtons&gt;
  </code></pre>