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 { }

Answer 1

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