question_about_angular.md

Hello Everyone, I have a problem that I cannot really wrap my head around.
I am writing a component which displays wraps any kind of data in a specific way. It then applies a function to said data, which can also be specified by the user.

I would like to avoid going too much into detail, unless it helps to solve the question.
The component displays the passed data - 1, data, data + 1.

This is how one would use the component:

<app-data-container [data]="myData" [transformFn]="myTransformationFunction">
  <ng-template #item let-mutatedDataVariableName="data">
    <h1>{{ mutatedDataVariableName }}</h1>
  </ng-template>
</app-data-container>

The data passed into the component can be any kind of algebraic data type. (for example a DateTime) The function takes an instance of the data type and a number and transforms the data using the number. In the example of a DateTime we could choose to add days.

public myData = DateTime.local();

public myTransformationFunction(data: DateTime, offset: number): DateTime {
  console.log("Called transform function with data", data, "and offset: ", offset);
  return data.plus({days: amount});
}

Inside the component, I am displaying the passed template three times, each time with a different number.
The data transformed by the function given the number is passed to the template so that the new data can be rendered.

<div class="previous">
  <ng-container [ngTemplateOutlet]="itemRef" [ngTemplateOutletContext]="{data:transformFn(_data, -1)}"></ng-container>
</div>
<div class="current">
  <ng-container [ngTemplateOutlet]="itemRef" [ngTemplateOutletContext]="{data:transformFn(_data, 0)}"></ng-container>
</div>
<div class="next">
  <ng-container [ngTemplateOutlet]="itemRef" [ngTemplateOutletContext]="{data:transformFn(_data, 1)}"></ng-container>
</div>

So here is the Problem:

In theory, the transform function should be called three times, resulting in three logs.
But in reality it is called multiple more times. I assume that this is due to angular updating the view on changes. However, nothing changes. The app-data-container component only has ~3 additional variables, all of which are set when the component loads and never change (in my test scenario).
Does angular update the view whenever a variable is assigned?
The operations i want to put inside transformFn can be quite expensive. That is why I would like to avoid calling it more times than necessary.