How can I use @Output and ngModel together in Angular? Getting 'Argument of type Event is not assignable to parameter of type Interface_name' error

Question

*Argument of type 'Event' is not assignable to parameter of type 'Interface_name'.*

Hi, i am learning how to use @Output decorator on Angular.

I know that i must use it to send information from child component to their 'father' component but i have some issues with the $event argument i put on father component.

i'll show some pieces of my code:

1.- 'Character' is just an interface:

export interface Character {
  nombre: string,
  poder: number
}

2.- Child Component:

a.- Typescript:

public personaje: Character = {
    nombre: '',
    poder: 0

}

@Output('')
  public onNuevoPersonaje: EventEmitter<Character> = new EventEmitter<Character>();

  agregarPersonaje()
  {
    console.log(this.personaje)
    if (this.personaje.nombre.length === 0 || this.personaje.poder < 0 )
    {return;}
    console.log(this.personaje)
    this.onNuevoPersonaje.emit(this.personaje);

 }

b HTML: (I show this section because i am using an ngSubmit event instead of (click) event on the button)

<form class = 'row' (ngSubmit) = agregarPersonaje()>
 <input type = "text"
   [(ngModel)] = 'personaje.nombre'
   name='nombre'
   class = 'form-control mb-2'
   placeholder = 'Nombre personaje'>

 <input type = "number"
 [(ngModel)] = 'personaje.poder'
 name = 'poder'
 class = 'form-control mb-2'
  placeholder = 'Ingrese poder'>

 <button type = "submit" class = 'btn btn-primary'>
   Agregar
 </button>

3.- Father Component

a.- Typescript: (just the relevant part)

public onNuevoPersonaje(personaje: Character): void
{
  console.log('Information received')

  console.log(personaje);
} 

b.- HTML:

<div class = "col">
    <app-formulario (onNuevoPersonaje) = "onNuevoPersonaje($event)"></app-formulario>
</div>

$event on this section shows the error:

Argument of type 'Event' is not assignable to parameter of type 'Character'. Type 'Event' is missing the following properties from type 'Character': nombre, poder.

If i change the type of the argument on 'onNuevoPersonaje' at '3.a' to any, obviously i haven´t the error anymore. In this case, i can see, with all console.log() that the information don't reach the father component.

example

Can anyone help me to understand how to fix this? (If there is a little option to keep ngModel event would be great)

Answer 1

I found the error. It appear when i wrote @Output('') on child component at 2.a. I didn't notice that single quotes tecnically change the name of 'OnNuevoPersonaje'. I think it was the reason behind of my first error message.

After remove single quotes ( @Output() ) the original error dissapear and finnaly I can use the decorator correctly receiving the information on Father Component.

Thank you to people who try to help me aswering my question on coments.