Argument of type 'Event' is not assignable to parameter of type 'string'

Question

in the below code I want to use the EventEmitter to result in calling the method onlyNewAddedItems.

I defined the EventEmitter instance and the method that emits the event as shown below:

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

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item:" + val);
    this.items.push(val);
  }

To bind to third event I did the following:

<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

but when I compile the code, I receive the following error

Error: src/app/app.component.html:4:42 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

4 <h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>                                        
  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
    

Please, let me know how to execute the method onlyNewlyAddedItems via EventEmitter.

AppComponent.component.ts:

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'InputOutputBindings';
  currentItem = 'TV';
  items = ['item1', 'item2', 'item3', 'item4'];

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

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item:" + val);
    this.items.push(val);
  }

  onlyNewlyAddedItems(val : string) {
    console.log("onlyNewlyAddedItems:" + val);
  }
}

app.component.html:

<h1 #test = customdirective appItemDetails [item]="currentItem">{{currentItem}}  item</h1>
<label>Add an item: <input #newItem></label>
<button (click) = addNewItem(newItem.value)>add new item</button>
<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

Answer 1

Temporary solution if you want to leave strict template type checking enabled is to wrap $event in $any(). Example:

$any($event)

it should work .. tested on Angular 13x

Answer 2

Check your app.module.ts file and make sure you have the components listed in your container in the declarations.

@NgModule({
   declarations : [
   AppComponent, 
   //your child component
],
...})

Answer 3

To clear the error,

In the onlyNewlyAddedItems method, you are expecting string but you're passing $event from the template. Please try with the below code.

<h1 #test = customdirective appItemDetails [item]="currentItem">{{currentItem}}  item</h1>
<label>Add an item: <input #newItem></label>
<button (click) = addNewItem(newItem.value)>add new item</button>
<h1 (newItemValue) = onlyNewlyAddedItems(newItem.value)></h1>

But listening inside the component will not work. since these decorators (Input and Output) are used to communicate outside from the component.

Answer 4

Check out this StackBlitz demo. Event emitters are meant for passing data to parent component. In the example, you can see that your code works when you are emitting value from a separate child component.

Answer 5

As other answers have already pointed out, the most likely cause is an error in your declarations/exports/imports in your module, so check that first. However, if you can't seem to fix the issues, here's a handy work around (that doesn't use 'any', which you should try to avoid using).

Step 1 - emit your data as an event in your child ts component:

@Output() newItemValue = new EventEmitter<Event>();

//...

this.newItemValue.emit(result as unknown as Event);

Step 2 - Your parent html component is the same as what you already have:

<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

Step 3 - your parent ts component will convert the payload into the necessary data type:

  onlyNewlyAddedItems(event: Event) {
    const val = event as unknown as string;
    console.log(`onlyNewlyAddedItems:  ${val}`);
  }

Hope this helps!

Answer 6

onlyNewlyAddedItems(val: string) {
console.log("onlyNewlyAddedItems:" + val);
}

Change the method parameter datatype from string to any as below. This method works for me.

onlyNewlyAddedItems(val : any) {
console.log("onlyNewlyAddedItems:" + val);
}

Answer 7

You're trying to handle the emitted event in the same component that you emit it from. If I remove everything else from your AppComponent it looks like this:

export class AppComponent {

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

  # Trigger event to be emitted
  addNewItem(val : string) {
    this.newItemValue.emit(val);
  }

  # Attempt to handle event (in the same component?)
  onlyNewlyAddedItems(val : string) {
    console.log("onlyNewlyAddedItems:" + val);
  }
}

<!-- You're emitting the event here -->
<button (click) = addNewItem(newItem.value)>add item</button>

<!-- and trying to capture the event here, 
     in the same component. This won't work -->
<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

Your event emitter and handler are both in the same component which I imagine is not what you want. An event is a way of communicating data to parent components.

Your event will be emitted from the AppComponent itself

Your event will not be emitted within the component. It will be emitted on the component, i.e. you would capture it from the app component itself:

<app-component(newItemValue)="onNewItem($event)"></app-component>

Why you're seeing the wrong event type: Event

You can add any made up event handler to any html element and Angular will just assume it's there and cast it to Event. So you think that your typing is wrong but what's acutally happened is that you've added an event handler for an event that may not (probably doesn't) exist.

Answer 8

Try

@Output("addNewItem") newItemValue = new EventEmitter<string>();

that solved a similar problem for me.

Answer 9

you're in strict mode, just wrap the $event in $any. it'll solve the issue