mouseleave/mouseout and mouseover/mouseenter called multiple times when using ngFor

I’m submitting a … (check one with “x”)

[x ] bug report 

Current behavior

I’m using ngFor to generate “li” elements with “mouseout” and “mouseenter” events.

<li *ngFor="let star of stars; let i = index;"
	[ngClass]="star"
	(mouseout)="mouseLeaveStarEvent($event)"
	(mouseenter)="mouseOverStarEvent(i, $event)"
	(click)="toggle(i, $event)"
	attr.aria-label="{{i+1}} star">
	<div class="ms-Icon ms-Icon--star" [ngClass]="star"></div>
</li>

When I keep moving my mouse pointer inside one “li” element, the mouseout and mouseenter handlers get fired multiple times.

Plunkr: https://plnkr.co/edit/D65CFnO7YIU1ile3lxaV?p=preview

Expected behavior

If I keep moving my mouse pointer inside one “li” element, I expect that mouseenter only gets called once the first time i enter that element, and mouseout to be called once when I leave that element.

The workaround right now is to NOT use ngFor by list all “li” elements manually.

• Angular version: 2.0.0

• Browser: Chrome

• Language: Typescript

[vicb]

any chance stars array is a new array on each CD cycle ?

[skreborn]

@vicb It was indeed a new array on each cycle, but changing that didn’t help.

@ejaury I think the root of the problem is that mouseleave does one thing, and mouseenter does another, and they pretty much conflict. An easy solution to your problem would be to set mouseleave up on the <ul> element, like so.

In any case, this sounds like a support request, rather than a bug, so let me redirect you to an appropriate channel, should you need any further assistance. If you still believe this to be a bug, please, let us know.