Tooltip not working with ngFor when getting array of objects from method

[diginikkari]

Bug, feature request, or proposal:

Bug. Tooltip is not shown with ngFor when getting array of objects from method.

What is the expected behavior?

I expect tooltip to show also when component is repeated using ngFor for items from method.

What is the current behavior?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://stackblitz.com/edit/angular-azfiac

What is the use-case or motivation for changing an existing behavior?

It should work.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Material 5.2.1, Angular 5.2.1

Is there anything else we should know?

I think that stackblitz is quite self explanatory.

[julianobrasil]

@diginikkari, this is not a bug. Calling a function from the template is not a good practice and this is an example of why this recommendation exists.

When the tooltip is fired in the first case, it starts an angular detection cycle, which in turn calls items() again and it tries to show the tooltip again and it starts another angular detection cycle and it goes on and on and on repeatedly.

At first, the recommendation exists to avoid performance issues, but it has other consequences like in your case.

If you put a console.log in items(), you'll see it keeps being called again and again...

If calling a function is mandatory, use a pipe instead.

[josephperrott]

Closing for the reasons noted above.

To get a bit more specific, the issue is that your method creates a new Array every time it is called. Because an instances of arrays aren't equal (i.e. [1,2,3] != [1,2,3]), the change detection cycle restarts everytime items() is called. You need to return the exact same instance of the array.

_items = [{state: 'one', count: 2},{state: 'two', count: 3}];

items() {
  return this._items;
}

[diginikkari]

Thanks @josephperrott and @julianobrasil !

This makes sense. In my actual component I was filtering my input property which was an array of object. Filter always return new array, so that affected this change detection loop.

Note for future me and other who might bump to this issue. If there is need to filter input property for your template, do it in ngOnChanges life cycle hook.

like here:

...

@Input() salesorderRows: SalesorderRow[];

subRows: SalesorderRow[];

ngOnChanges() {
    this.subRows = this.salesorderRows ? this.salesorderRows.filter(row => row.parentRowId === this.salesorderRow.id) : null;
}

@josephperrott @julianobrasil

I am doing something vary similar however i have a usecase where i am pulling in data from an api and then needing to manipulating the data. This is all done in a model file.

Here is my stackoverflow - https://stackoverflow.com/questions/49633413/angular-material-mattooltip-does-not-display-when-using-ngfor-function

please tell me the best way around this problem.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}