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
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.