What is Event Binding in Angular?

I'm encountering an issue related to $event in Angular 11. Can someone assist me in troubleshooting this problem? $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

angulartypescriptcompiler-errors

Answer №1

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

There seems to be a typographical error in your code. You are listening to recipeWasSelected but your output is named recpieWasSelected in the RecipesListComponent.

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

A similar issue exists here, although I would not categorize it as a "typo". You are listening to ingridientAdded, but your output is named ingridientEmitter in the ShoppingEditComponent.

Further details based on your comment:

In addition to the mentioned errors, there are 2 more issues that need attention.

  • The click event in recipes-item.component.html is not being called as a function, make sure to add () at the end
  • The EventEmitter name recipeWasSelected in RecipesListComponent needs correction as well

Ultimately, I suggest using a reliable IDE to help identify and address these issues more effectively.

Answer №2

There is an error in this section:

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

The specified Output parameter name in the tag is incorrect.

You need to update the term (ingridientAdded) to (ingridientEmitter)

This application is operational at the workplace

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use React to dynamically render a table by mapping over an array to generate

I'm facing an issue where I am trying to display an array within a specific section of a table, but it's not displaying. Even though all the values are being fetched correctly. const renderReturnReasons = () => { dailyReportDetailItem.re ...

javascriptreactjstypescript

Is there a way to verify the presence of a collection in firestore?

Is there a way to check if a collection exists in Firestore or not? There is a method to check if a document exists, like so: this.afs.doc('users/' + userId).ref.get().then((doc) => { if (doc.exists) { console.log("User already e ...

angularfirebasegoogle-cloud-firestore

Challenges encountered while implementing Cognito API with Angular's HttpClient and HttpHeaders

Recently, I've been facing a dilemma between HttpClient and Axios. When I implement the following code: const requestBody = { grant_type: 'refresh_token', client_id: environment.APP_COGNITO_CLIENT_ID, refresh_token: thi ...

angularamazon-web-servicesamazon-cognito

Refrain from adding tabs to the history state

Currently, I am facing an issue while developing a PWA in Ionic/Angular specifically related to tabs when using the PWA on Android. The application has three tabs: Home, Shopping, and Favorites. Each tab has subpaths that can be navigated. The problem ari ...

angularionic-frameworkprogressive-web-appsbrowser-history

Change the date from Thu Jan 01 1970 01:00:00 GMT+010 to the format yyyy/mm/dd

Currently, I am developing a web application using Angular which includes a form with a date field that utilizes the angular material datepicker component. Once a user selects a date from the datepicker, the retrieved value is in the format: Thu Jan 01 197 ...

javascriptangularangular-material

The Date object in Typescript is represented as a string

My typescript interface includes a variable called start, which is typed as Date | null. This data is retrieved from a dotnet API that returns a DateTime object. The issue arises when the start variable is passed through a function in Date-fns, causing a R ...

c#reactjs.nettypescriptasp.net-web-api

Managing optgroup in select dropdown using Angular 4

Is there a way to retrieve the optgroup label value within an onchange function on a select box in Angular 4? In my form, I have a select box with multiple dates as option groups and time slots in 24-hour format for booking (e.g. 1000 for 10AM, 1200 for 1 ...

angulartypescriptdata-binding

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...

htmlangularionic-frameworkionic3

How can I properly specify the type of a function for a complex object with index signatures in TypeScript?

Problem with Retrieving Specific Data from Mixed Object I'm encountering an issue with a function that is supposed to retrieve a specific piece of data within an object. The object contains a combination of known indexes and index signatures, which s ...

typescripttypescript-typingstypescript-generics

What causes the node_modules folder to become corrupted when publishing an AspNetCore2 project with Visual Studio?

During the development of my AspNetCore project using Kendo, Angular5, and AspNet Mvc, everything was running smoothly. However, when trying to publish the project, I encountered a strange issue where it breaks. https://i.sstatic.net/2xQ1Q.png I then cam ...

angularvisual-studionpmasp.net-corekendo-angular-ui

What is the best way to configure Angular within a Docker container?

I've been trying to deploy my Angular app in a Docker container, but I'm facing difficulties with routing the app inside the container. Despite following the guidelines provided in the official Angular documentation, I haven't been successfu ...

angulardockerangular-routing

Activate function on Ctrl + K in a React TypeScript project

I am currently developing a React TypeScript application using version v18.2.0. My goal is to trigger a function when the user simultaneously presses Ctrl + K. Here is the code snippet within my component: const keyDownHandler = (event: KeyboardEvent) =& ...

reactjstypescript

Using a dictionary of class types as input and returning a dictionary of their corresponding instances

Is there a way to create a function that takes a dictionary with class values as an argument and returns a dictionary of their instances? For example: classes C1, C2 function f: ({ name1: C1, name2: C2 }): ({ name1: new C1() name2: new C2 ...

typescript

There seems to be an issue with the compilation of TypeScript

I got my hands on the Typescript + AngularJS example downloaded from this source: The issue I'm facing is that whenever I compile it using Visual Studio, the references don't seem to be compiled properly. However, if I utilize the command prompt ...

javascriptangularjstypescripttypescript1.4tsc

Transferring HTML attributes from an Immutable object in Typescript

This implementation is effective type Props = DR<IBtnWrapperPropsBasic> & {otherbuttonProps?: ButtonHTMLAttributes<HTMLButtonElement>} class Btn extends Component<Props, {}> { ... public render() { const {handleCl ...

reactjstypescript

Using multiple Y-Axes with ng2-chart results in a specific error stating that it is not compatible with the type '_DeepPartialObject<{type: "time"; } & Omit<CartesianScaleOptions'

Currently, I've implemented ng2-charts in Angular 15 to showcase a line chart containing two sets of data positioned on both sides of the Y-Axis. The code snippet utilized is as follows: public chart1Data: ChartConfiguration<'line'> ...

angularng2-charts

Having trouble disabling an ESLint rule for ESLint, TypeScript, Vue, and WebPack Encore?

I've been delving into Webpack Encore and ESLint issues for quite some time now, but unfortunately, I haven't been able to find a solution to my problem. Specifically, I've been trying to change or disable certain TypeScript-ESLint rules, b ...

typescriptvue.jswebpackeslintwebpack-encore

Creating an Observable with no data in Angular 6 using Rxjs 6

Currently, I am diving into the world of Angular 6 with RxJS 6 and have stumbled upon a question regarding the scenario where I need to return a null or empty Observable in case the response fails or encounters an exception. In this situation, my assumptio ...

typescriptrxjsangular6rxjs6

Is it possible to use AngularJS promise scheduling with `async`/`await` syntax?

When working with AngularJS services, TypeScript often recommends that I switch my code to use async/await functions. https://i.sstatic.net/vks1i.png While I understand that using the await keyword is compatible with third-party promises because it essen ...

angularjstypescriptasync-awaites6-promiseangular-promise

Unable to compile Angular 5 using the AOT systemjs configuration

I've hit a roadblock in finding a solution to my issue. Maybe someone out there can lend me a hand. I'm in the process of upgrading from ng 4.4.4 to 5.0.1 and everything seems to be functioning fine in JIT mode. However, when attempting to compi ...

angular