CODEWITHSUNDEEP
angularangular-event-emitter
Alec
Alec

Reputation: 464

@Output not firing method from parent component

I've been struggling with this problem for some hours and its getting pretty frustrating. I have a child component in which in which I need to detect when the mouse hovers over something. The mouseenter event fires correctly and my method within the child component (app-circle) is fired but after I emit() the method from parent component does not get called.

Angular version: 8.0.1

Here is some relevant code:

Child component (app-circle):

TS:

@Output() mouseEnter: EventEmitter<any> = new EventEmitter();
...
public onMouseEnter() {
   this.mouseEnter.emit();
}

HTML:

<a (mouseenter)="onMouseEnter()"> ... </a>

Parent component:

HTML:

 <app-circle (mouseEnter)="onBackgroundCircleMouseEnter()"> </app-circle>

TS:

public onBackgroundCircleMouseEnter() {
   console.log('emitted');
}

Upvotes: 0

Views: 4491

Answers (3)

Rabea AlTaradeh
Rabea AlTaradeh

Reputation: 224

Try to return any data in emitter, cuz you dedicated the type

any => EventEmitter<any>

So I think to try returning anything 

public onMouseEnter() {
    this.mouseEnter.emit({});
}

It may work !!!

I hope that i could help you more

Upvotes: -1

JB Nizet
JB Nizet

Reputation: 691765

As discovered in the comments, your code is fine. But you have two divs on top of each other, and the mouseenter event listener is registered on the background one, which is "hidden" by the foreground one. So it never receives the event. If you remove the foregound (second) one, then it works as expected.

Upvotes: 3

Suresh Kumar Ariya
Suresh Kumar Ariya

Reputation: 9764

It should work as expected, If you are using Child Component emit event to Parent. I have implemented the same logic using directive which will listen for 'mouseenter' event using @Hostlistener and emit an output event.

Here is the stackblitz Code

https://stackblitz.com/edit/angular-yniybk?file=src%2Fapp%2FattachMouse.Directive.ts

Upvotes: 0

Related Questions