When should I use observable subscriptions instead of regular variables in an angular template parameter?

Question

I'll give you a quick example to try to explain what I'm doing. I need to pass a boolean "chartReady" to my child component, this variable is set up inside a method that gets called in different methods of my component. I'm trying to understand what's the best way, performance-wise, of doing this.

First option: Using a regular variable inside the component and pass it as a regular parameter.

Component:

setChartReady() {
    this.chartReady = false;
    setTimeout(() => {
        this.chartReady = true; //wait for chart to be completed
    }, 4000);
}

Template:

<details-chart
    [chartReady]="chartReady">
</details-chart>

Second option: Using an observable (or BehaviorSubject in this case) inside my component and passing its subscription to the template.

setChartReady() {
    this.chartReady$.next(false);
    setTimeout(() => {
        this.chartReady$.next(true); //wait for chart to be completed
    }, 4000);
}
______________________________________________________________
<details-chart
    [chartReady]="chartReady$ | async">
</details-chart>

Is there any difference between this two approaches? I know for a fact that if I had something similar to option 1, but instead of passing the variable directly I did something like:

returnChartReady() {
    console.log("Is this repeating?")
    return this.chartReady;
}
______________________________________________________________
<details-chart
    [chartReady]="returnChartReady()">
</details-chart>

Angular would keep trying to call the returnChartReady method for every single small interaction that I had with the page, I checked it with the console.log that gets called multiple times. As a matter of fact, even if I change the method to return an observable and subscribe to it like the next example, the method still keeps getting called multiple times.

returnChartReady$(): Observable<boolean> {
   console.log("Is this repeating?")
    return this.chartReady$;
}
______________________________________________________________
<details-chart
    [chartReady]="returnChartReady$() | async">
</details-chart>

My questions are: Will angular keep on trying to update my variable wildly when using the regular variable approach just like it did when I returned it with the returnChartReady method? And what about the observable approach, will it prevent the repeated update checks? And lastly, if the observable approach does work, why is the same problem occurring in my last example, where I clearly subscribe to the method? Does angular handle methods passed to template parameters differently from variables passed to template parameters?

Thank you in advance.

Answer 1

The reason for the repeated console logs is due to Angular's default change detection system. This is why you can use a property or method in your component to signal the load event.

If you utilize observables to handle asynchronous events, then you can update your component's change detection strategy to something more optimized. (See https://angular.io/api/core/ChangeDetectionStrategy)

If your app is small, then the performance improvement is negligible. However, if you are working on a larger, or more data intensive application, then you may want to have your components utilize observables and OnPush change detection strategies.