Is it normal for Angular to re-render infinitely even when no changes are made?

Question

The question

Is Angular designed to constantly re-check everything in order to detect changes? I'm coming from the React world and I was expect something like event triggered -> re-rendering. I don't know if this is something from my app or something from Angular.

If I have a method that's called from the HTML Template, it gets called infinitely even if nothing in my component changes.

The problem

I have a calendar-like page that loads a lot of data and has to compute things before rendering, because it would be too difficult to do these things with the ngIf directive. So I have things in my template that look like:

<div [innerHTML]="_getDayPrice(item, day) | safeHtml"></div>  

If I console log something in the _getDayPrice method, it gets printed infinitely.

What I've tried

1. I've managed to bypass this by manually injecting the ChangeDetectionRef in my app and doing this.cdRef.detach(). This however feels hacky as sometimes I might need to re-enable it and detach again.

2. I've tried to investigate if it's something from my parent component apps, like containers. I've rendered in my main app.component a single div like <div class={{computeClass()}}> and in that method printed a console log and sure enough it gets called infinitely. So following this I've tried commenting-out all of the apps' services. If all are commented out sure enough it works properly, but also there's no observable data. I've investigated for about half a day and couldn't find a single point of failure (like commenting out this service fixes everything).

3. Record performance using chrome's built-in Performance tab, but again couldn't find anything from my code that triggers changes. zone.js gets called repeatedly and appears to set an interval that keeps firing.

4. Of course I've searched for occurrences of setTimeout and setInterval in the services but couldn't find something that keeps getting changed that might cause this issue.

Conclusion?

Bottom line is: is it normal, if you have a complex Angular app and call a method from the template, for that method to be called infinitely?

And if not, do you have any hints as to what might be causing this? Or any other means to bypass it rather than detaching the changeRef detector?

My only concern is with performance. It's a calendar-like page that renders multiple-rows, and it lags pretty severely on a 8GB RAM laptop. I'm pretty sure that a tablet or a phone would almost freeze.

Answer 1

You should use pipes as often as possible when transforming data in your HTML.

Pipes are only re-evaluated when the piped object or parameters change (so if one of the inputs is an object, make sure to create a new instance of that object to trigger re-evaluation). For most uses, you can use a pipe rather that an function.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'getDayPrice'
})
export class GetDayPricePipe implements PipeTransform {

  transform(item: string, day: string): string {
    // ... do whatever logic here
    return item + day;
  }

}

Then use it like that :

<div [innerHTML]="item | getDayPrice:day | safeHtml"></div>

Answer 2

There are two mechanisms availables to mitigate number of bindings checks

1 - ChangeDetectorRef.detach : Allow to detach your compoentn out of the change detection loop, so the bidding while not be refreshed until reattachement.

2 - ChangeDetectionStategy.OnPush : Tell Angular that the bindings of your component need to be checked only when at least one of the component @Input has changed. Your can find me details on how to use it here

IMO you should create a component with item / days Inputs wrapping your display DOM element. Something like

// wrap.component.ts
@Component({
  template: '<div [innerHTML]="_getDayPrice() | safeHtml"></div>',
  changeDetection: ChangeDetectionStrategy.OnPush,
  ...
})
export class WrapComponent {
  @Input() item: Item;
  @Input() day: String; 

  private _getDayPrice = () => {
      // compute your HTML with this.item and this.day instead of parameters
      ....
  }
}

Then you should see the logic triggered only when the item or the day changes.