In Angular custom event binding does not work-CodePudding

I try to pass data from the child component "user-handle" to the parent component (which is the root component in my case), with event binding. In the user-handle component, I receive data from the client via NgForm, and I emit it like this:

@Output() addedUserName = new EventEmitter<string>();

onSubmit(form: NgForm){
    this.addedUserName.emit(form.value.userName);
    console.log("Event emitted from child comp, user name is: "   form.value.userName);
    form.resetForm();
  }

The console.log properly prints out the input, so this seems to be working. Then I catch the data in the app.component.html:

<app-user-handle (onSubmit)="onUserAdded($event)"></app-user-handle>

and pass it to a property in the .ts:

userFromChild = "";

  onUserAdded(event){
    console.log("parent comp event function called");
    this.userFromChild = event;
  }

but something goes wrong here, as the onUserAdded() function does not even run. I assume, it must be something wrong when the app.component tries to catch the event, but no clue, what. Anyone has a guess?

CodePudding user response：

Parent element should listen to addedUserName instead of onSubmit

<app-user-handle (addedUserName)="onUserAdded($event)"></app-user-handle>

https://angular.io/guide/inputs-outputs#configuring-the-parents-template