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>

Solution 1

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.

Solution 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
],
...})

Comments

[LetsamrIt]

is being listning inside the component the reason why $event is not working!!is there anyway to have $event working?

[Ramanathan Chockalingam]

It is not listening inside, actually, the error is related to type mismatch. Please let me know the use case, Why we need a separate event emitter to log the new item when we have the current new item and respective handle.

[Ramanathan Chockalingam]

Welcome! @LetsamrIt

[Michael Lang]

This fixed it for me when I was dealing with ngx-image-cropper and it's events return complex types defined in their module.