So I have an event emitter working just fine. In my child, I call a function:
(click)="EnterEditMode()
which fires:
EnterEditMode(){
this.enterEdit.emit(null);
}
In my parent, I then:
enterEdit(){
console.log("got some text");
}
This works flawlessly. But now I want to add a second output right next to it. So in the child, I call:
SaveChanges();
Which triggers a function:
SaveChanges() {
this.saveChanges.emit(null);
console.log("save");
}
When I call this, the console log is triggered but the emit is not triggered. My parent has a function that is thus never called.
saveChanges() {
console.log("saving changes");
this.editing ? this.editing = false : this.editing = true;
}
I really can't see what I'm doing wrong and have tried to trouble shoot but I'm getting no errors, just the console log that the "SaveChanges()" has been called. Am I missing something about emitters?
Edit to show my event emitters
In my child component I:
@Output() enterEdit = new EventEmitter<any>();
@Output() saveChanges = new EventEmitter<any>();
Again, enterEdit works but saveChanges does not...
In my particular case, I was experiencing this issue without warnings or messages.
My misunderstanding was the following:
<app-child [someObject]="currentObject" (emitEventFunction)="saveChange($event)">
In my template tag, I placed the name of my function that emits an event, emitEventFunction()
, instead of placing the object I declared with the @Output()
decorator. This meant that while I was trying to get the function emitEventFunction()
called whenever the saveChange()
function was called in my child component, Angular was actually looking for an object called emitEventFunction
.
The solution, naturally, was to find what I had declared as my output:
@Output() entryChange = new EventEmitter<any>();
And use that instead:
<app-child [someObject]="currentObject" (entryChange )="saveChange($event)">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With