Getting a MatToolTip value from a function is getting continually called

Issue

I am getting a list of tooltips from a function in my angular project using a function:

[matTooltip]="getToolTip('Column name')"

For the purpose of this question, lets say the function looks like this:

getToolTip(tooltipName)
{
  var date1 = new Date();
  console.log("getToolTip", tooltipName,date1 )
  return tooltipName;
}

-- NB: My real getToolTip function is extracting data from an array

This works fine but if I open up the console I can see that this method is being continually called. I would have thought this is only run once?

Stackblitz

Solution

ChangeDetectionStrategy.OnPush disable default angular change detection in component. But you should manualy control detection change.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

Angular Docs

Answered By - Ivanes