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...
So this was due to a fundamental misunderstanding of how Output Emitters work in Angular.
Wrong assumption Simply triggering an emitter would force my controller to react.
Solution In my html file, I have to add the listener to an element and then pass the event from the html to the controller. This triggers the controller to do what ever the function is supposed to do.
In my .html file I need to add (saveChanges)='saveChanges($event)' to my custom component. This works.