Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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>
–
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
–
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
...})
–
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.
–
–
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.
Change the method parameter datatype from string to any as below. This method works for me.
onlyNewlyAddedItems(val : any) {
console.log("onlyNewlyAddedItems:" + val);
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.
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
