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

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 4

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);
}