[Fixed] Angular OnMouseOver invoke function in parent component that return input value


I’m trying to understand why hovering on item in child invoke method from parent component.
Here is example link

I have parent component that pass items into child component (list) like this:

<app-list [items]="getItems()"></app-list>
  items = [
      label: 'test',
      label: 'foo',

  getItems(): any[] {
    return this.items;

in app-list component:

<li *ngFor="let item of items" (mouseover)="onMouseOverOption(item)" role="option">
  <span>{{ item.label }}</span>

  onMouseOverOption(item) {
    console.log("onMouseOverOption", item);

And every time when I’m hovering on list item method getItems() is invoked – twice. Can someone explain this behavior to me?



It’s called Angular Detection Changes system.
You can learn more about it here:

Leave a Reply

(*) Required, Your email will not be published