angular 2 - pass 2 parameters to an EventEmitter

Question

My question is similar to that question: How to pass 2 parameters to EventEmitter angular 2

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.

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.

I can't figure out what's the problam here.

this is component.ts where the EventEmitter is:

and this is the html component from which i recive the 2 parameters:

Let me try to explain my whole procces if it would help you understand and help me out.

first i recive two inputs from 'shoppingListButtons.component.html'

   <div class="container">
<form>
    <div class="form-group col-lg-4 col-md-3">
        <label for="recipeName">{{inputTName}}</label>
        <input type="text" class="form-control" id="recipeName" [(ngModel)]="ingredientTitle" name="title">
    </div>

    <div class="form-group col-lg-2 col-md-3">
        <label for="recipeAmount">{{inputTAmount}}</label>
        <input type="text" class="form-control" id="recipeAmount" [(ngModel)]="ingredientAmount" name="amount">
    </div>

</form>
</div>

<div>
     <button class="btn btn-success" (click)="AddToShoppingList()">{{btnToAdd}}</button>
    <button class="btn btn-danger">{{btnDel}}</button>
    <button class="btn btn-primary" (click)="clear()">{{btnClr}}</button>
</div>

then, these two inputs: 'ingredientTitle' and 'ingredientAmount' supposed to be passed to the EventEmitter that is in 'shoppingListButtons.component.ts'

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<any> = new EventEmitter();

    AddToShoppingList() {
        this.shoppingListChanged.emit(this.ingredientTitle);
    }
}

After that, the Emitter should pass the parameters to the method: 'AddIngredients' that is in 'shoppingList.component.ts'

export class ShoppingListComponent {

 constructor(private _shoppingListService: ShoppingListService) { }

 ingredientsList = this._shoppingListService.ingredientsShoppingList;

 listTitle: string;
 listAmount: number;

 AddIngredients(listTitle, listAmount) {
   this._shoppingListService.AddIngredients(listTitle, listAmount)
 }

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.

the array:

@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;
}

}

how i display my list in shoppingList.component.html:

<div class="container">
<h2>Shopping List</h2>
<shoppingListButtons (shoppingListChanged)="AddIngredients($event)" [inputTName]="inputTitleName" [inputTAmount]="inputTitleAmount"
  [btnToAdd]="btnAdd" [btnDel]="btnDelete" [btnClr]="btnClear"></shoppingListButtons>