0

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

Improve this question

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thankyou so much MoxxiManagarm for the help. Correcting my mistake i am able to compile the code succesfully but the app is not working correctly i.e wheni click on the recipe it's details are not shown and add ingridiemt also redirects to home page can you please help me solve that
0

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

Improve this answer

1 Comment

Thankyou so much Onur Özkır for the help. Correcting my mistake i am able to compile the code succesfully but the app is not working correctly i.e wheni click on the recipe it's details are not shown and add ingridiemt also redirects to home page can you please help me solve that

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.