#Parent component not receiving emit from child component

3 messages · Page 1 of 1 (latest)

marble mesa
#

I have a child component <customer-add-form> that I'm using on a parent AddCustomerToClassComponent like this:

<customer-add-form #customerForm>
        (addExistingCustomer)="handleAddExistingCustomer($event)"
        (addNewCustomer)="handleAddNewCustomer($event)"
        (testFunc)="handleTest($event); console.log('Parent template capturing
        event:', $event)" >

I have a few handlers setup to respond to EventEmitters from CustomerAddFormComponent, for instance (testFunc)="handleTest($event)" I've also added the additional console.log inline to see if the subcription triggers at all (it doesn't).

Inside the child component, I have a simple setup:

<button (click)="testEmit()">test</button>
@Output() testFunc = new EventEmitter();`
testEmit(): void {
    console.log('Child emitting testFunc event:', 'test');
    this.testFunc.emit('test');
  }

Inside the parent, I never see the breakpoint hit here:

  handleTest(foo: string): void {
    debugger;
  }

I've experimented with different method signatures for handleTest like handleTest(event: Event): void. None of these work either. There must be something outside the basic @Output / Emit structure that is causing this bug. Here is a PasteBin to the code for both parent/child components/templates: https://pastebin.com/aCgpEhWs

hasty marsh
#

Are you sure in your real code that button is not inside the form?

eager hazel
#
<customer-add-form #customerForm>
(addExistingCustomer)="handleAddExistingCustomer($event)"

Your event handling code is inside the body of the element instead of being on the element. It should be

 <customer-add-form #customerForm
(addExistingCustomer)="handleAddExistingCustomer($event)">