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, Oct 08 '20 at 05:54
is `onAccept()` called on any event(eg: button click) in child component? — Haroon, Oct 08 '20 at 06:07
@Haroon : hey yes, there is a button and on its click its called.By the way its Kendo button. — Adithya, Oct 08 '20 at 06:11
have you tried at child:---- @Output() choice = new EventEmitter(); — Sandeep Modak, Oct 08 '20 at 06:15
can you provide the parent component where the `(choice)` is being referred? — Gabriel George, Oct 08 '20 at 07:04
@SandeepModak : Hey ya, I tried that too and infact the true value is been emitted too, but the same is not triggering back to parent component function. — Adithya, Oct 08 '20 at 07:47
Interesting.... One more question, what is the EventEmitter import? Last time this happened to me, it was because I imported the wrong event emitter — Gabriel George, Oct 08 '20 at 22:55

score 0 · Answer 1 · edited Sep 22 '21 at 15:45

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 Answers1