How to detect view refresh in Angular?

I have a component that displays dynamic, read-only data. For example:

<div>{{getText()}}</div>

I noticed that getText is being invoked over and over by Angular, even if there is seemingly no need to do so, i.e. no data has changed. How can I detect when Angular triggers view refresh?

You can detect it using the ngDoCheck hook. Which fires during a change detection cycle.

On each cycle the function gets called and the function is evaluated.

If you want to improve performance, you can enable ChangeDetectionStrategy.OnPush, which will reduce the number of change detection cycles.

Angular OnPush Change Detection and Component Design - Avoid Common Pitfalls

The more easier solution is to evaluate the function and store it in a property which you show in HTML, then you can rerun the function to update the property whenever it will change.

export class SomeComponent { @Input() conditionToUpdateText: string; displayProp = '';

ngOnInit() {
  this.getText();
}

getText() {
  this.displayProp = this.conditionToUpdateText === 'hello' ? 'world' : 'asdf';
}

ngOnChanges() {
    this.getText();
}

In the above example we set the initial value of displayProp on the ngOnInit hook (during initialization), then since the data is dependent on the inputs, we use the ngOnChanges hook ( when inputs change ) to reevaluate the property. The HTML usage will be:

{{displayProp}}

Although it is ok for simple functions to fire multiple times during change detection, as a rule of thumb avoid functions since if you accidentally use a costly array operation like find in the HTML binding, it gets called multiple times and causes a drop in performance.