Angular EventEmitter is not firing in parent component from child component

Question

I know this is answered question and there are so many links too but my issue is strange happening, could you please guide me in right path. Thank you in advance for helping me.

Issue : Event emitter is not hitting in parent component function when a button click happening in child component where emit is happening.

child html:

 <button (click)="onAccept()" class="k-button approve-data" kendoButton>{{confirmBtn}}</button>

child ts:

    @Output() choice = new EventEmitter<boolean>();

    public onAccept() {
    this.choice.emit(true);
    }

parent html:

    <app-confirm-modal (choice)="onPopupClose($event)" />

parent ts:

    onPopupClose(isOk: boolean): void { }

parent function in ts is : onPopupClose(isOk: boolean): void { } — Adithya
is onAccept() called on any event(eg: button click) in child component? — Haroon
@Haroon : hey yes, there is a button and on its click its called.By the way its Kendo button. — Adithya
@Haroon : <button (click)="onAccept()" class="k-button approve-data" kendoButton>{{confirmBtn}}</button> — Adithya
have you tried at child:---- @Output() choice = new EventEmitter<boolean>(); — Sandeep Modak

Sharukh Sharukh · Accepted Answer · 2021-09-22T14:40:57

I have faced the same bug and I resolved it and this is how I did it

When I debugged emit method in chrome dev tool while emitting the value I found out that the eventEmitter.observers object is empty for some reason.

After some more debugging and try error methods I found that @ViewChild in the child component is causing this issue and I removed it and used different method for View Child feature (It is completely depend on what you are trying to achieve).

Angular EventEmitter is not firing in parent component from child component

1 Answers