Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 4 Event Emitter not Emitting

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...

like image 702
DKinnison Avatar asked Dec 14 '22 19:12

DKinnison


1 Answers

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)">

like image 99
Eamon Bohan Avatar answered Dec 26 '22 15:12

Eamon Bohan