Event Binding in The Angular?

Question

I am facing certain error with $event in angular 11. Please someone help me to debug it.. $event error in angular Error message : Error Message

Error: src/app/recipes/recipes.component.html:4:26 - error TS2739: Type 'Event' is missing the following properties from type 'Recipe': name, description, imagePath

4     (recipeWasSelected)="selectedRecipe=$event"></app-recipe-list>
                           ~~~~~~~~~~~~~~~~~~~~~

  src/app/recipes/recipes.component.ts:6:16
    6   templateUrl: './recipes.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RecipesComponent.


Error: src/app/shopping-list/shopping-list.component.html:3:64 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'Ingridient'.
  Type 'Event' is missing the following properties from type 'Ingridient': name, amount

3         <app-shopping-edit (ingridientAdded)=onIngridientAdded($event)></app-shopping-edit>
                                                                 ~~~~~~

  src/app/shopping-list/shopping-list.component.ts:6:16
    6   templateUrl: './shopping-list.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ShoppingListComponent.

CODE LINK:

https://github.com/Umang01-hash/RecipeBook

Answer 1

Error: src/app/recipes/recipes.component.html:4:26

That is a typo, you listen to recipeWasSelected while your output is named recpieWasSelected within RecipesListComponent

Error: src/app/shopping-list/shopping-list.component.html:3:64

Basically the same, but I wouldn't call that "typo" in that case. You listen to ingridientAdded, while your output is named ingridientEmitter within ShoppingEditComponent.

Extended answer as per your comment

You have 2 further issues.

• The click event within recipes-item.component.html is not a function call, please add ()
• The EventEmitter name recipeWasSelected within RecipesListComponent is also wrong

After all I recommend to take hand on a good IDE, it would highlight you most of those issues

Answer 2

the mistake is here:

<app-shopping-edit (ingridientAdded)="onIngridientAdded($event)"> </app-shopping-edit>

The name of the Output parameter in the tag is incorrect.

You have to change the word (ingridientAdded) to (ingridientEmitter)

a working application at work

https://stackblitz.com/edit/angular-48vyda?file=src/app/app.component.html