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

Issue

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[] {
    console.log('getItems');
    return this.items;
  }

in app-list component:

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

  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?

Thanks

Solution

It’s called Angular Detection Changes system.
You can learn more about it here:
https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496