typescript - Multiple times method calling from angular template

Question

I am using method inside a template to call the function, that returns boolean value. The issue is that the function is called more than 6 times. After that I used changeDetectionStrategy.onPush which reduced the calls to 2 times. Below is my code

HTML

<div *ngIf="(checkboolObs(check$)) | async"></div>

TS

check$: Observable<service> = this.data.getresponse();

ngOnInit() {
  this.checkboolObs();
}
checkboolObs(style):boolean {
  return somestyleIDS.includes(style.component)
}

If the value is found it returns true, but it is called several times i need to call it only once. The reason behind this is because checkboolobs() is not triggered some times while navigating that's why I am calling this method from the template.

Answer 1

This is normal as every time the change-detection cycle is called it will evaluate the template and your function is part of it, so the function will be re-evaluated(called again).

A brief explanation of how does the change detection work in Angular

Imagine that each time there is an event, that might cause any change (for example clicks, some time intervals are doing something, ajax calls) Angular takes the template and re-evaluates it for you out of the box (in other words updates the HTML).

When you use the onPush strategy you are basically telling angular to stop listening for any of the mentioned changes because you will be the one in charge of telling the framework when a change has occurred. ** Disclaimer we have the | async that can be used in templates and it will work fine with the onPush strategy and if your inputs change by reference change detection will be triggered, but as I said this is a brief explanation.

So the thing that you can do is (i assume that you are getting the ids from the check$ observable)

myCheck$ = this.check$.pipe(map(arrayOfIds => arrayOfIds.includes(style.component)))

and then use myCheck$ inside your template with |async.

If this doesn't work please explain in more detail your use case.